Некоторое время назад я написал статью о пользовательских шаблонах Vue 3, в которой быстро рассказал о том, как создать свой собственный многоразовый шаблон. Получив удивительно положительные отзывы, стало очевидно, что я собираюсь выпустить ее с открытым исходным кодом. Поэтому, разместив его на GitHub, я решил также опубликовать свой boilerplate на NPM — Node Package Manager — чтобы сделать легко управляемый и быстро устанавливаемый пакет.
Поскольку Node.js становится все более популярным среди программистов, соответственно, множество популярных модулей переиздаются и поддерживаются в «реестре» NPM. Мне тоже захотелось внести свой вклад в сообщество open-source, поэтому в этой статье/руководстве я рассмотрю процесс публикации моего собственного boilerplate на NPM в качестве примера.
Необходимые условия
Первое, что вам понадобится, это верифицированный аккаунт NPM и установленный Node.js. Очевидно. 😅
Создайте учетную запись NPM
Зайдите на страницу регистрации NPM, заполните форму регистрации и подтвердите свой аккаунт одноразовым паролем (высылается на ваш e-mail).
⚡Идеально, настройте защиту 2-факторной аутентификации, прежде чем продолжить.
Установите Node.js
Теперь пришло время установить Node.js (он поставляется вместе с инструментом командной строки NPM) — посетите https://nodejs.org/en/download/ и выберите установку в зависимости от вашей ОС и процессорных ядер машины.
⚡Примечание — если у вас 2 и более ядер процессора, вам следует использовать 64-битную программу установки.
Запустите программу установки. Вы можете использовать настройки по умолчанию, только убедитесь, что выбрали «Добавить в путь» — это позволит вам запускать NPM из командной строки.
После завершения установки откройте терминал и проверьте, можете ли вы использовать Node.js & инструмент командной строки NPM:
node -v // Node.js Version
npm -v // NPM version
👏 Это работает!
Инициализируем наш пакет
Отлично, теперь мы можем инициализировать наш пакет. В моем случае я открою каталог с кодовым шаблоном Vue 3 и запущу процесс инициализации NPM:
cd vue3-boilerplate
npm init
⚡ Не стесняйтесь использовать мой шаблон Vue 3 для данного руководства.
Теперь вам будет предложено заполнить основную информацию о пакете, такую как — name, version, description, keywords и т.д. После этого в корне вашего проекта будет создан новый файл package.json, содержащий всю информацию о пакете.
⚡Помните — сделайте ваш пакет более доступным… добавьте как можно более подробную информацию, а также как можно больше сочетаний ключевых слов. Вы можете узнать больше о настройке package.json здесь.
Вход в систему
Прежде чем публиковать, нам нужно войти в NPM:
npm login
Username: <your_username>
Password: <your_password>
Email: (this IS public) <your_e-mail>
Если у вас не настроен 2FA (что я вам настоятельно советую сделать), вам будет выслан одноразовый пароль на ваш e-mail. Скопируйте его и завершите процесс входа в систему:
npm notice Please check your email for a one-time password (OTP)
Enter one-time password: 12345678
Logged in as <your_username> on https://registry.npmjs.org/.
Заключительный тест
Существует множество руководств npm link о том, как протестировать пакет перед публикацией, поэтому в противоположность им я сделаю по-другому, гораздо более простому способу.
Создайте каталог ./test в корневом каталоге проекта ./vue3-boilerplate, перейдите в каталог ./test и инициализируйте установку теста в папке:
mkdir test
cd test
npm i "../"
// or
npm i "absolute/path/to/<your_package_name>"
⚡ Всегда тестируйте перед публикацией!
Опубликовать пакет
Теперь — 🥁(барабанная дробь) момент истины — время опубликовать наше решение в публичном репозитории NPM (помните, что вы должны находиться в директории вашего проекта при выполнении этого действия):
npm publish --access public
Вам будет предложено ввести код 2FA или одноразовый пароль, отправленный на ваш e-mail. Введите один из них и завершите процесс публикации.
Если все было введено правильно, в конце вы должны увидеть следующее:
npm notice Publishing to https://registry.npmjs.org/
+ vue3-boilerplate@1.0.6`
⚡ Для публикации в частном порядке удалите параметр --access public. Помните, что для доступа к приватному хостингу пакетов на NPM у вас должна быть подписка не ниже Pro.
Обновление пакета
Для того чтобы обновить пакет, вам нужно будет обновить и номер версии. В целях тестирования давайте откроем наш файл package.json и увеличим номер версии с 1.0.0 до 1.0.1.
...
"version": "1.0.1"
...
Сохраните и снова опубликуйте свой пакет. На этот раз вы можете использовать одну из команд управления версиями:
npm version patch // 1.0.1 => 1.0.2
npm version minor // 1.1.0 => 1.2.0
npm version major // 1.0.0 => 2.0.0
Затем:
npm publish --access public
Теперь, если вы посетите страницу NPM-репозитория вашего пакета, вы увидите обновленную версию.
🎉 Поздравляем!
Вы готовы к открытому исходному коду своих собственных пакетов NPM. 👏
Заключительные слова
В заключение я хочу отметить пару важных моментов, касающихся публикации пакетов:
- Всегда — и я имею в виду ВСЕГДА — тестируйте перед публикацией. Никто не захочет устанавливать неработающий пакет. Существует множество различных инструментов тестирования в зависимости от вашего стека.
- 403 — Forbidden — ошибка при публикации может означать многое — ваш только что созданный e-mail не проверен, имя вашего пакета уже занято, у вас нет Pro-подписки для приватной публикации или вы обновляете одну и ту же версию.
- Напишите файл
README.md. Представьте себе — вы достигли просмотров, но никто не скачивает ваше решение, потому что, ну… нет документации о том, как использовать ваше решение. 🤨 - У NPM есть еще много замечательных команд в рукаве — просто нажмите
npm helpилиnpm help <command>, чтобы перечислить их все или прочитать документацию. Я нашел эту статью с отличными советами и рекомендациями по NPM. - Автоматизируйте установку пакетов NPM с помощью NPX или NPM CLI. Это отличная идея — дать разработчикам возможность настраивать ваш пакет во время основного процесса установки.
Если у вас возникли проблемы с выполнением моих шагов, описанных выше, или вам просто понравилась эта статья — я буду благодарен, если вы напишите в комментариях ниже. 👋