Как собрать пакет npm

NPM пакетный менеджер JavaScript. Он управляет зависимостями как для клиентской стороны, так и для серверной. Если вы намерены выложить исходный код своего проекта и иметь возможность устанавливать его как отдельный компонент, лучший способ сделать это создать пакет.

Что для этого нужно?

Для начала установить пакетный менеджер, если это ещё не было сделано. Установка зависит от используемой вами операционной системы, описывать её не вижу смысла: материала по этому вопросу предостаточно.

Акканут

Первый шаг самый тривиальный. Зарегистрируйтесь на npmjs.com. После этого вы сможете публиковать пакеты от своего имени прямо из командной строки. Введите команду:

$ npm login
Username: your_name
Password:
Email: (this IS public) your_name@domain.com
Logged in on https://registry.npmjs.org/.

Подготовка проекта к публикации

Помимо самого кода, обязательно приложить файл README.md, содержащий описание того как подключить и использовать пакет.

Ещё надо обзавестись файлом package.json, где хранятся основные сведения о пакете и прописаны его зависимости, если таковые имеются. В директории проекта создаём этот файл командой npm init, вносим подходящее описание и консольные команды в секцию scripts (опять же если они есть):

{
  "name": "mypackage",
  "version": "1.0.0",
  "description": "The best package in the world",
  "main": "index.js",
  "scripts": {
    "test": "command for testing package"
  },
  "repository": {
    "type": "git",
    "url": "git+https://github.com/myname/mypackage.git"
  },
  "keywords": [
    "my",
    "package"
  ],
  "author": "me",
  "license": "MIT",
  "bugs": {
    "url": "https://github.com/myname/mypackage/issues"
  },
  "homepage": "https://github.com/myname/mypackage#readme"
}

Осталось только закоммитить изменения и выложить код на github.

Тестируем пакет

Всегда тестируйте работоспособность своего творения прежде, чем публиковать его в репозиторий npm.

# установка пакета из github
$ npm install mypackage

# или локально с указанием пути к модулю
$ npm install path_to_mypackage/mypackage

Публикация

Находясь в директории проекта, скомандуйте npm publish. Вы должны увидеть что-то подобное:

+ mypackage@1.0.0

Теперь пакет можно найти в репозитории npm через поиск или по прямому адресу npmjs.com/package/mypackage. Любой может установить его как зависимость своего собственного проекта командой npm install mypackage --save.

Если вы дорабатывали программу позже и пакет оказался в неактуальном состоянии, измените версию в package.json и снова опубликуйте его через npm publihs.

ES6-модули

Допустим, нужно использовать не commonJS, а модули ES6. Что тогда? Увы, нам не обойтись без транспайлера Babel.JS. Именно с его помощью будут проводиться все манипуляции. Ставим необходимые пакеты как зависимости нашей библиотеки.

$ npm i --save-dev babel-cli babel-core babel-preset-es2015

Также надо создать два каталога: один для исходников, другой для скомпилированной версии скрипта. Это будут src и lib соответственно.

Для удобства пропишите нужные команды в package.json своего проекта.

"scripts": {
  "compile": "babel --presets es2015 -d lib/ src/",
  "prepublish": "npm run compile"
}

Первая команда будет собирать файлы .es6 из исходников и помещать их в lib/. Вторая делать то же самое без вашего участия при публикации пакета в npm-репозиторий.

Для коректной сборки нужно ещё немного магии. Создать .gitignore, поместить туда каталог сборки lib/. В package.json указать главный файл проекта, например:

"main": "lib/mylibrary.js"

Таким образом, в git находятся только исходники, а при публикации в npm будут собраны и файлы, пропущенные через транспайлер.

Для подключения модуля в конкретном проекте теперь можно установить его стандартным способом и импортировать.

$ npm i --save mylibrary

// подключаем
import myfile from 'mylibrary';