Как опубликовать модуль ES6 в NPM
Не бойся бабеля, как я ...
Предварительные требования:
- Node.js установлен
- NPM установлен (входит в состав node.js)
- Базовый синтаксис Bash
Итак, вы хотите опубликовать свой собственный модуль NPM и написать этот код в синтаксисе ES6? Вот проблемы, с которыми мы столкнемся в этой статье:
- Нам нужно будет построить наш проект (Сложность: Легко)
- Нам нужен способ скомпилировать наш код из ES6 в ES2015, чтобы он был совместим с любым кодом. (Сложность: средняя)
- Нам понадобится способ протестировать наш код локально, прежде чем отправлять его в NPM. (Сложность: легко)
- Нам нужно убедиться, что имя нашего пакета не конфликтует с другими пакетами. (Сложность: легко)
- Мы создадим учетную запись в NPM и разместим наш код. (Сложность: легко)
- Наконец, мы протестируем наш код с новым проектом, установив наш новый пакет! 🎉
Как видите, каждый из этих шагов очень прост. Итак, приступим :)
1. Нам нужно будет построить наш проект (Сложность: Легко)
Сначала создайте новый проект.
Я перешел в свой каталог проектов и выполнил процесс установки следующим образом:
Примечание. Поле name
в нашем package.json
будет именем нашего модуля, когда мы отправим его в NPM.
Хорошо, мы настроили наш проект. Давайте подготовимся к будущему, создав пару файлов и каталогов. Вот моя файловая структура:
Вот что мы создали:
./index.js
Это точка входа в наше приложение. Это означает, что когда кто-то устанавливает ваше приложение из NPM, это именно тот файл, который им требуется, когда они…const alecsAwesomeModule = require(‘aymather-es6’)
Точка входа в ваше приложение указывается в полеmain
в вашемpackage.json
./src/
Это каталог, также известный какsource
. Здесь мы будем писать весь наш код ES6../src/index.js
Это файл, который будет экспортировать весь наш код ES6 из этого каталога../dist
Этот каталог также известен какdistribution
, что является общим названием «всего нашего скомпилированного кода, который собирается использовать кто-то другой». Другими словами, после того, как наш код будет скомпилирован в ES2015, он будет жить здесь../.babelrc
Наш файл конфигурации babel../.gitignore
То, что мы не хотим помещать в наш репозиторий github../.npmignore
То, что мы не хотим помещать в наш репозиторий npm.
2. Нам нужен способ скомпилировать наш код из ES6 в ES2015, чтобы он был совместим с любым кодом. (Сложность: средняя)
Мы будем использовать Babel для компиляции нашего кода.
Я избегал узнавать, как работает babel с того момента, как впервые использовал
create-react-app
... но поверьте мне, это действительно очень просто ...
Сначала нам нужно установить 2 зависимости разработчика.
npm install —-save-dev babel-cli babel-preset-es2015
Как только они у нас появятся, мы можем настроить наш .babelrc
файл.
Примечание. Обычно с babel вам нужно установить плагин для каждой функции ES6, которую вы хотите реализовать (например, есть плагин только для того, чтобы вы могли использовать оператор распространения), и, используя
babel-preset-es2015
, мы в основном говорим babel: «Эй, дай мы все возможности ES6, которые у вас есть ».
Теперь нам нужен способ сказать Бабелю: «Эй, скомпилируйте код в папке src
и поместите его в папку dist
». Что мы собираемся сделать с помощью сценария npm в нашем package.json
.
Теперь, когда мы запускаем npm run build
из командной строки, babel скомпилирует наш src
и поместит его в dist
.
Наконец, нам нужно сказать index.js
: «Эй, возьмите все, что находится в dist
, и сделайте это доступным для всех, кому требуется этот пакет».
3. Нам понадобится способ протестировать наш код локально, прежде чем отправлять его в NPM. (Сложность: легко)
Сначала давайте напишем код ES6 в наш ./src/index.js
файл.
Милый, теперь давайте скомпилируем его с npm run build
и посмотрим, как Бабель волшебным образом помещает наш код в папку dist
.
Теперь у нас есть скомпилированный код!
А теперь большой вопрос…?
Как мы протестируем этот код, чтобы убедиться, что он работает, прежде чем публиковать его в NPM?
npm link
Мы собираемся создать связь между папкой этого модуля и другой папкой на нашем рабочем столе, чтобы мы могли протестировать ее локально перед публикацией.
Вернитесь в каталог Projects и создайте новую папку (неважно, как вы ее назовете), войдите в этот каталог и инициализируйте новый проект с помощью npm.
Я собираюсь разделить мой терминал, чтобы я мог одновременно находиться в обоих каталогах. Затем я собираюсь создать новую символьную ссылку в каталоге моего модуля, чтобы я мог подключить этот модуль к моей тестовой директории.
В основном это будет выглядеть так, как будто я
npm install
поместил его в свой тестовый каталог, с той лишь разницей, что мои изменения будут немедленно применены к моему тестовому каталогу.
Теперь добавьте свой тестовый каталог в редактор кода, потребуйте модуль и попробуйте его использовать.
Запустите его с node index.js
Теперь вы можете внести изменения в свой модуль и протестировать их в реальном времени в своем тестовом каталоге.
ВАЖНО: ваши изменения будут активны, но вам все равно нужно будет построить свой модуль, когда вы внесете в него изменения, потому что ваша точка входа указывает на вашу папку сборки.
4. Нам нужно убедиться, что имя нашего пакета не конфликтует с другими пакетами. (Сложность: легко)
Я должен изменить сложное здесь с Easy на Super Easy.
Есть замечательный пакет с открытым исходным кодом, который сделает это за вас из командной строки.
Просто следуйте инструкциям по установке из этого https://github.com/sindresorhus/npm-name-cli
Найдите название своего пакета в package.json
И используйте это имя в командной строке, чтобы проверить, доступно ли оно.
5. Мы создадим учетную запись в NPM и разместим наш код. (Сложность: легко)
Еще один очень простой шаг. Просто перейдите на https://www.npmjs.com/ и создайте новую учетную запись.
После того, как у вас будет учетная запись, вернитесь в командную строку и войдите в нее.
Убедитесь, что вы находитесь в каталоге своего модуля, и запустите npm publish
Теперь вы сможете увидеть свой пакет в NPM!
6. Наконец, мы протестируем наш код с новым проектом, установив наш новый пакет! 🎉
Я собираюсь сделать все это за один шаг, потому что вы уже должны знать, как это сделать.
Создайте новый проект, запустите npm install
+ your_package_name
, потребуйте его в своем проекте и используйте.
Последние мысли
Игнорировать файлы
Мы забыли добавить к нашим файлам .npmignore
и .gitignore
.
По сути, мы хотим сказать npm: «Эй, не бери наши файлы src, потому что пользователь заботится только о скомпилированном коде».
И скажите github: «Не забирайте наш node_modules/
каталог». Вам решать, хотите ли вы включить скомпилированный код в свой репозиторий github. Обычно я игнорирую это.
Предварительная публикация
- Перед публикацией кода в NPM необходимо убедиться, что вы запускаете
npm run build
, чтобы он компилировался. В противном случае вы не сможете использовать свои изменения.
Существуетprebuild
скрипт, который вы можете добавить в свойpackage.json
, который вы можете использовать для этого каждый раз, когда публикуете в npm, но он устарел и может вызвать проблемы в другие способы. Но я оставлю это на ваше усмотрение. - Вам также необходимо увеличить номер вашей версии в
package.json
. Есть инструменты, которые помогут вам управлять номерами версий.
Репозитории
NPM: https://www.npmjs.com/package/aymather-es6
Github: https://github.com/aymather/aymather-es6
Спасибо за прочтение :)
Ваше здоровье