Как опубликовать модуль ES6 в NPM

Не бойся бабеля, как я ...

Предварительные требования:
- Node.js установлен
- NPM установлен (входит в состав node.js)
- Базовый синтаксис Bash

Итак, вы хотите опубликовать свой собственный модуль NPM и написать этот код в синтаксисе ES6? Вот проблемы, с которыми мы столкнемся в этой статье:

  1. Нам нужно будет построить наш проект (Сложность: Легко)
  2. Нам нужен способ скомпилировать наш код из ES6 в ES2015, чтобы он был совместим с любым кодом. (Сложность: средняя)
  3. Нам понадобится способ протестировать наш код локально, прежде чем отправлять его в NPM. (Сложность: легко)
  4. Нам нужно убедиться, что имя нашего пакета не конфликтует с другими пакетами. (Сложность: легко)
  5. Мы создадим учетную запись в NPM и разместим наш код. (Сложность: легко)
  6. Наконец, мы протестируем наш код с новым проектом, установив наш новый пакет! 🎉

Как видите, каждый из этих шагов очень прост. Итак, приступим :)

1. Нам нужно будет построить наш проект (Сложность: Легко)

Сначала создайте новый проект.

Я перешел в свой каталог проектов и выполнил процесс установки следующим образом:

Примечание. Поле name в нашем package.json будет именем нашего модуля, когда мы отправим его в NPM.

Хорошо, мы настроили наш проект. Давайте подготовимся к будущему, создав пару файлов и каталогов. Вот моя файловая структура:

Вот что мы создали:

  1. ./index.js
    Это точка входа в наше приложение. Это означает, что когда кто-то устанавливает ваше приложение из NPM, это именно тот файл, который им требуется, когда они…
    const alecsAwesomeModule = require(‘aymather-es6’)
    Точка входа в ваше приложение указывается в поле main в вашем package.json
  2. ./src/
    Это каталог, также известный как source. Здесь мы будем писать весь наш код ES6.
  3. ./src/index.js
    Это файл, который будет экспортировать весь наш код ES6 из этого каталога.
  4. ./dist
    Этот каталог также известен как distribution, что является общим названием «всего нашего скомпилированного кода, который собирается использовать кто-то другой». Другими словами, после того, как наш код будет скомпилирован в ES2015, он будет жить здесь.
  5. ./.babelrc
    Наш файл конфигурации babel.
  6. ./.gitignore
    То, что мы не хотим помещать в наш репозиторий github.
  7. ./.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. Обычно я игнорирую это.

Предварительная публикация

  1. Перед публикацией кода в NPM необходимо убедиться, что вы запускаете npm run build, чтобы он компилировался. В противном случае вы не сможете использовать свои изменения.
    Существует prebuild скрипт, который вы можете добавить в свой package.json, который вы можете использовать для этого каждый раз, когда публикуете в npm, но он устарел и может вызвать проблемы в другие способы. Но я оставлю это на ваше усмотрение.
  2. Вам также необходимо увеличить номер вашей версии в package.json. Есть инструменты, которые помогут вам управлять номерами версий.

Репозитории

NPM: https://www.npmjs.com/package/aymather-es6
Github: https://github.com/aymather/aymather-es6

Спасибо за прочтение :)

Ваше здоровье