Как собрать пакет 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';