Публикация компонента TypeScript React в NPM
Вероятно, существует множество статей о том, как опубликовать библиотеку в NPM, поэтому, вероятно, нет смысла писать еще одну статью об этом. Однако, когда дело доходит до TypeScript, количество руководств по этому аспекту намного меньше. Я недавно попробовал это сделать, и, немного поработав, я здесь, чтобы поделиться тем, как я это сделал. Заявление об ограничении ответственности: я сам новичок в публикации в NPM, так что это чисто мой самоуверенный способ, который никоим образом не является единственным и абсолютно правильным.
Настройка
Мы стремимся написать простой компонент React на TypeScript и опубликовать его. Просто, понятно, без излишеств. В этом руководстве предполагается, что вы знакомы с React, TypeScript и уже можете устанавливать зависимости, используя npm или yarn. В противном случае вы можете прочитать о React и TypeScript соответственно.
Перво-наперво создайте папку проекта в вашем рабочем пространстве. В этом уроке мы создадим простой компонент hello world. После этого мы запускаем npm init в папке, чтобы создать package.json файл шаблона.
$ cd <workspace> $ mkdir hello-world $ cd hello-world $ npm init
На npm init вам будет предложено ввести несколько значений для создания файла package.json. Когда будет предложено поле main, введите lib/index.js. Не стесняйтесь оставить остальные по умолчанию, нажав Enter.
Далее мы устанавливаем необходимый минимальный набор зависимостей.
$ npm i -D typescript react react-dom @types/react @types/react-dom
Затем мы приступаем к добавлению tsconfig.json, чтобы TypeScript знал, как скомпилировать наш проект.
Идея состоит в том, чтобы все исходные файлы в папке src были скомпилированы в javascript es5 в папке lib. Для свойства declaration установлено значение false, поскольку мы будем писать собственные определения в index.d.ts, чтобы разработчикам TypeScript, использующим наш компонент, не приходилось тратить дополнительное время на написание объявлений внешних модулей для нашей библиотеки.
И это почти все, что нам нужно для запуска простого проекта!
Написание компонента
Теперь мы создадим простой компонент приветствия TypeScript React.
С указанными выше файлами структура проекта должна теперь выглядеть примерно так.
node_modules src |- HelloWorld.tsx |- index.ts index.d.ts package.json tsconfig.json
Если вы введете следующую команду,
$ tsc
TypeScript скомпилирует исходные файлы из папки src в папку lib.
Издательский
Теперь мы более-менее готовы к публикации! Давайте сначала обновим команды сценария в package.json.
...
"scripts": {
"build": "rm -rf ./lib && tsc",
"prepare": "yarn build",
},
...
Для публикации запустите:
$ npm publish
Когда вызывается npm publish, npm автоматически запускает npm prepare (не рекомендуется npm prepublish) перед фактической публикацией. Поэтому перед публикацией выполните в npm prepare все необходимые команды (например, сборку, тесты и lint).
Вуаля! Если все пойдет хорошо, вы должны опубликовать пакет. Обратите внимание, что если имя проекта уже занято в NPM, вы не сможете опубликовать проект под этим именем. Чтобы проверить, занято ли уже пространство имен, попробуйте перейти по следующему URL-адресу.
https://www.npmjs.com/package/<project name>
Если вы видите сообщение NPM 404 not found с инструкциями по публикации, это означает, что пространство имен готово к использованию!
Тесты и линтинг
Чтобы проект был надежным, важны тесты и линтинг.
Тесты
Я лично использую Jest для тестирования простых компонентов, так как он работает "из коробки" и прост в настройке.
Установите следующие зависимости.
$ npm i -D jest enzyme enzyme-adapter-react-16 @types/jest @types/enzyme @types/enzyme-adapter-react-16
Примечание: не забудьте установить правильный адаптер фермента для вашей версии React!
Теперь вы можете приступить к написанию тестов для вашего компонента!
Линтинг
Я использую tslint для линтинга моего кода TypeScript. Необходимы следующие зависимости.
$ npm i -D tslint tslint-react
tslint-react содержит набор основных правил линта, готовый к использованию прямо из коробки. Затем вы можете дополнительно настроить его в файле конфигурации tslint.json. Пример файла выглядит следующим образом.
Наконец, обновите свой package.json, чтобы перед публикацией запускались тесты и lint!
...
"scripts": {
"build": "rm -rf ./lib && tsc",
"test": "jest",
"lint": "tslint -c tslint.json --project tsconfig.json",
"prepare": "yarn test && yarn lint && yarn build",
},
...
Заключение
Написать компонент TypeScript React для публикации NPM быстро и легко! С минимальными зависимостями мы можем запустить его, используя функции типизированного языка, которые предоставляет TypeScript. Ниже приведена некоторая информация для дальнейшего чтения, которая может помочь вам в вашем процессе.
npm-ссылка
Протестируйте свой пакет локально с npm link!
Обновление 19.10.2018
В tsconfig.json установка declaration в значение true избавляет от хлопот по написанию собственного определения.
Обновление 15.08.2019
Внесено изменение в генерацию package.json, чтобы поле main было заполнено lib/index.js вместо значения по умолчанию index.js.
