Шаг 1. Создайте репозиторий git и npm инициализируйте его.

mkdir embed-testcd embed-testgit initnpm init

На этом этапе npm init задаст вам несколько вопросов. Вот ответы, которые вы должны предоставить:

package name: (embed-test) [Just Press Enter]
version: (1.0.0) [Just Press Enter]
description: A barebones npm package [Press Enter]
entry point: (index.js) dist/index.js [Press Enter]
test command: [Just Press Enter]
git repository: YOUR_GIT_REPO [Press Enter]
keywords: the,best,package,to,have,ever,existed [Press Enter]
author: JavaScript Wizard [Press Enter]
license: MIT [Press Enter]
is this ok? (yes) [Press Enter]

Если вы наберете git status, вы должны увидеть файл package.json во вновь созданном репозитории.

Шаг 2. Создайте каталог src

Каталог src будет местом, где мы разместим весь код, который мы на самом деле пишем. Поскольку мы будем использовать babel для его преобразования на более позднем этапе, мы можем использовать современный синтаксис JavaScript в файлах JavaScript этого каталога.

npm install @babel/cli @babel/core @babel/preset-env --save-dev

Теперь вы должны увидеть эти три пакета в разделе devDependencies вашего package.json.

Шаг 4. Создайте .babelrc

Нам нужно дать babel инструкции о том, как транспилировать наш JS код. Для этого создайте файл: .babelrc в верхнем уровне вашего проекта (вместе с package.json).

Добавьте следующее содержимое в ваш вновь созданный .babelrc

{  "presets": ["@babel/preset-env"]}

Шаг 5: Production сборка

На шаге 1 мы сказали npm прописали точку входа в наш проект dist/index.js. Это означает, что любые проекты, использующие наш пакет, будут смотреть на dist/index.jsдля запуска кода. Чтобы это работало должным образом, нам нужно указать babel, что нужно сохранить трансплантированный код из нашего каталога src в каталог dist.

Создайте сценарий сборки, добавив следующую строку кода в package.json с ключом scripts.

"scripts": {   "build": "npx babel src --out-dir dist"},

Давайте проверим это! Выполните следующую команду

npm run build

ПРИМЕЧАНИЕ: для работы этой команды вам потребуется глобальная установка npх Установите npx, выполнив npm install -g npx

Теперь вы должны увидеть в своем проекте папку dist с файлом index.js, содержащим трансплантированную версию нашего кода src/index.js!

На этом этапе мы закончили все необходимое для публикации в npm, но не делайте этого пока!

Шаг 6: Development tсборка

У нас есть babel, транслирующий наш код и записывающий результат в dist, но в процессе разработки мы не хотим каждый раз вручную повторно запускать npm run build, когда мы вносим изменения в наш пакет.

Добавьте следующую строку после сценария build в package.json

"scripts": {
   "build": "npx babel src --out-dir dist",
   "start": "npx babel src --watch --out-dir dist",
},

Теперь выполните следующую команду:

npm run start

Каждый раз, когда вы вносите изменения в src/index.js или в любые другие файлы js, которые вы добавляете в src, вы увидите изменения, отраженные в dist.

Шаг 7: .npmignore и .gitignore

Прежде чем мы опубликуем этот пакет в npm или зафиксируем его на GitHub, нам нужно создать 2 файла игнорирования:

.npmignore — сообщает npm, какие папки и файлы следует игнорировать при публикации в npm.

.gitignore— Сообщает git, какие папки и файлы следует игнорировать при нажатии на git.

На верхнем уровне нам важны каталог dist в npm и каталог src в git.

Создайте файл .npmignore на верхнем уровне вашего проекта и добавьте следующее содержимое

.DS_Store
src

Все в node_modules игнорируется, за исключением связанных зависимостей и npm автоматически сделает это за вас, так что не беспокойтесь о добавлении node_modules в .npmignore. Список игнорируемых файлов по умолчанию, поэтому нет необходимости явно добавлять их в .npmignore:

Создайте файл .gitignore на верхнем уровне вашего проекта и добавьте следующее содержимое

.DS_Store
node_modules
dist

Шаг 8: публикация вашего пакета

Как только вы разработали свой пакет, чтобы удовлетворить все, что вы хотите выпустить для версии 1.0.0, пора его опубликовать. К счастью, это очень просто сделать, мы просто запускаем babel & npm publish. Для этого выполните следующие 2 команды:

npm run build
npm publish

Теперь ваш пакет существует в npm, и вы можете использовать его, как любой другой пакет npm!