Как создать готовый пакет NPM для Barebones с помощью Babel 7

Руководство по простейшему пакету 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… но пока не делайте этого!

См. также:  Создайте календарь с помощью Angular и Bootstrap

Шаг 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

Понравилась статья? Поделиться с друзьями:
IT Шеф
Добавить комментарий

;-) :| :x :twisted: :smile: :shock: :sad: :roll: :razz: :oops: :o :mrgreen: :lol: :idea: :grin: :evil: :cry: :cool: :arrow: :???: :?: :!: