- Руководство по простейшему пакету npm или модулю узла с открытым исходным кодом.
- Шаг 1. Создайте репозиторий git и запустите его с помощью npm.
- Шаг 2: Создайте каталог src
- Шаг 3: Добавьте вавилон
- Шаг 4: Создайте .babelrc
- Шаг 5: Производственные сборки
- Шаг 6: Сборки для разработки
- Шаг 7: .npmignore и .gitignore
- Шаг 8: Публикация вашего пакета
- Заключительные мысли и следующие шаги
- Ресурсы:
Руководство по простейшему пакету npm или модулю узла с открытым исходным кодом.
Недавно у меня была возможность стать техническим руководителем CyberGRX, и с тех пор я много думал о своем видении будущего технологии компании. Я мог бы, наверное, часами разглагольствовать об этом видении, но резюмирую:
Я хочу, чтобы мы создавали технологии, которые переживут нас самих.
Первый шаг, который я предпринял для реализации этого видения, — это помощь в создании инициативы открытого исходного кода в компании. Одним из первых препятствий на этом пути было создание нашего первого пакета с открытым исходным кодом. Вместо того, чтобы просто собирать что-то вместе, я хотел использовать эту возможность, чтобы найти лучший способ настроить современный пакет npm. Моя цель состояла в том, чтобы создать максимально простой стартовый набор для модуля узла, который можно использовать в любом современном проекте JavaScript.
О, чуть не забыл…
Вы можете не читать всю эту статью и просто создать форк github.com/alekhurst/barebones-npm-package.
Шаг 1. Создайте репозиторий git и запустите его с помощью npm.
Создайте новый каталог, запустите его с помощью git и npm, используя следующие команды:
mkdir barebones-npm-package cd barebones-npm-package git init npm init
В этот момент npm init
задаст вам несколько вопросов. Вот ответы, которые вы должны предоставить:
package name: (barebones-npm-package)
[Просто нажмите Enter]
version: (1.0.0)
[Просто нажмите Enter]
description:
Базовый пакет npm [Нажмите Enter]
entry point: (index.js)
dist/index.js [Нажмите Enter]
test command:
[Просто Нажмите Enter]
git repository:
YOUR_GIT_REPO [Нажмите Enter]
keywords:
лучший,пакет из когда-либо существовавших [Нажмите Enter]
author:
Мастер JavaScript [Нажмите Enter]
license:
MIT [Нажмите Enter]
is this ok? (yes)
[Нажмите Enter]
Если вы наберете git status
, теперь вы должны увидеть файл package.json во вновь созданном репозитории.
Шаг 2: Создайте каталог src
Каталог src будет местом, где мы будем размещать весь код, который на самом деле пишем. Поскольку мы будем использовать babel для его транспиляции на более позднем этапе, мы можем использовать современный синтаксис JavaScript в файлах JavaScript в этом каталоге.
mkdir src cd src touch index.js
Добавьте следующий код во вновь созданный index.js
:
const tellMeTheMeaningOfLife = () => { console.log("Shiggidy Diggidy") } export default tellMeTheMeaningOfLife;
Шаг 3: Добавьте вавилон
Теперь, когда у нас есть начальная функциональность для нашего пакета barebones, мы хотим установить babel, настроить его для транспиляции каталога src
и сохранить его вывод в каталоге dist
. Выполните следующую команду, чтобы добавить необходимые пакеты babel:
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: Производственные сборки
На шаге 1 мы сказали npm установить точку входа нашего проекта на dist/index.js
. Это означает, что любые проекты, использующие наш пакет, будут обращаться к dist/index.js
для запуска нашего кода. Чтобы это работало должным образом, нам нужно сообщить Babel, чтобы он сохранил транспилированный вывод нашего каталога src
в каталог dist
.
Создайте сценарий build
, добавив следующую строку кода под ключом "scripts"
в строке 6 файла package.json
. Чтобы уточнить, вставьте это после строки 6 в package.json
и вставьте следующее:
"build": "npx babel src --out-dir dist",
Давайте проверим это! Выполните следующую команду
npm run build
ПРИМЕЧАНИЕ. Чтобы эта команда работала, вам потребуется глобально установить npx
… Установите npx, запустив npm install -g npx
Теперь вы должны увидеть в своем проекте папку dist
с файлом index.js
, содержащим транспилированную версию нашего кода src/index.js
!
На данный момент мы замкнули цикл на самом минимуме, необходимом для npm publish
… но пока не делайте этого!
Шаг 6: Сборки для разработки
У нас есть Babel, транспилирующий наш код и записывающий вывод в dist
, но мы не хотим вручную повторно запускать npm run build
в процессе разработки каждый раз, когда мы вносим изменения в наш пакет. Давайте добавим скрипт start
, чтобы отслеживать изменения в src
и автоматически повторно запускать транспайл каждый раз, когда вносятся изменения.
Добавьте следующую строку после сценария build
из шага 5 в package.json
"start": "npx babel src --watch --out-dir dist",
Теперь запустите следующую команду
npm run start
Каждый раз, когда вы вносите изменения в src/index.js
или любые другие файлы js, которые вы добавляете в src, вы увидите изменения, отраженные в dist
. Попробуйте это, изменив console.log("Shiggidy Diggidy")
на console.log("Memes")
.
Чтобы работать с вашим пакетом npm, вы можете использовать https://docs.npmjs.com/cli/link между проектом, который включает ваш пакет npm, и самим пакетом.
Шаг 7: .npmignore и .gitignore
Прежде чем мы опубликуем этот пакет в npm или зафиксируем его на GitHub, нам нужно создать 2 файла игнорирования:
.npmignore
— Сообщает npm, какие папки и файлы игнорировать при публикации в npm
.gitignore
— Сообщает git, какие папки и файлы игнорировать при отправке в git.
На высоком уровне нас интересует каталог dist
в npm и каталог src
в git.
Создайте файл .npmignore
на верхнем уровне вашего проекта и добавьте следующее содержимое
.DS_Store node_modules src
Создайте файл .gitignore
на верхнем уровне вашего проекта и добавьте следующее содержимое
.DS_Store node_modules dist
Шаг 8: Публикация вашего пакета
После того, как вы разработали свой пакет, чтобы удовлетворить все, что вы хотите выпустить для v1.0.0
, пришло время его опубликовать. К счастью, это очень легко сделать, мы просто запускаем babel и npm publish. Для этого выполните следующие 2 команды:
npm run build npm publish
Теперь ваш пакет существует в npm, и вы можете использовать его так же, как и любой другой пакет npm!
Заключительные мысли и следующие шаги
Это руководство охватывает вариант использования 100 % barebone-систем и предназначено для того, чтобы помочь вам начать работу с репозиторием, который будет масштабироваться. При этом есть еще несколько шагов, которые мне нравится выполнять при создании пакетов, таких как добавление eslint
, prettier
и тестов. Следите за будущими сообщениями/кодом, чтобы узнать, как лучше всего добавить их в ВАШ репозиторий npm.
Спасибо за чтение, и я надеюсь, что это помогло вам создать свой собственный пакет npm. Если вы застряли и хотите получить рабочую версию этого руководства, вот ссылка на код для этого barebones-npm-package
:
https://github.com/alekhurst/barebones-npm-пакет
…о, и если вы делаете пакет с открытым исходным кодом, я люблю вас :).
Ресурсы:
Полный package.json:
{ "name": "barebones-npm-package", "version": "1.0.0", "description": "", "main": "src/index.js", "scripts": { "build": "npx babel src --out-dir dist", "start": "npx babel src --watch --out-dir dist", "test": "echo \"Error: no test specified\" && exit 1" }, "repository": { "type": "git", "url": "git+https://github.com/alekhurst/barebones-npm-package.git" }, "keywords": [ "barebones", "npm", "package", "node", "module", "template", "boilerplate", "babel" ], "author": "Alek Hurst", "license": "MIT", "bugs": { "url": "https://github.com/alekhurst/barebones-npm-package/issues" }, "homepage": "https://github.com/alekhurst/barebones-npm-package#readme", "devDependencies": { "@babel/cli": "^7.1.5", "@babel/core": "^7.1.6", "@babel/preset-env": "^7.1.6" } }
Полная структура проекта:
Рабочий код:
https://github.com/alekhurst/barebones-npm-package