Пакеты NPM

Как создать и опубликовать собственный пакет NPM

Создайте учетную запись в реестре NPM, напишите код для своего пакета и опубликуйте

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

Что мы будем делать

В этом руководстве мы создадим и опубликуем в реестр NPM пакет NPM, выполнив следующие действия.

  • Создайте учетную запись реестра NPM.
  • Напишите код, который станет вашим пакетом NPM.
  • Протестируйте это локально.
  • Добавьте module.exports, чтобы экспортировать то, что будет доступно в вашем пакете тем, кто его установит.
  • Опубликуйте свой пакет в реестре NPM.
  • Проверьте свой пакет NPM с помощью npm install.

Наше внимание будет сосредоточено на процессе, а не на пакете как таковом. Так что мы сделаем наш пакет простым.

Мы будем создавать пакет, который удаляет дубликаты из массива.

После публикации, если пользователь устанавливает наш пакет с помощью npm install, он может легко удалить дубликаты из массива.

Важное предложение: имя пакета в реестре NPM должно быть уникальным. Поэтому вам, вероятно, придется изменить имя вашего пакета. Вам напомнят сделать это в соответствующее время в руководстве.

Или вы можете просто следовать инструкциям и создать свой собственный пакет, который делает что-то, кроме удаления дубликатов из массива.

Что тебе понадобится

  • Nodejs установлен
  • Инструмент командной строки NPM. Он устанавливается при установке Nodejs.
  • Я предлагаю вам установить git и также загрузить его в удаленный репозиторий. Я не буду добавлять эти шаги в это руководство.

Я буду использовать код Visual Studio (VSCode). Его можно получить здесь.

Настройка учетной записи в реестре NPM

Чтобы создать учетную запись, нажмите здесь.

  1. Нажмите кнопку Зарегистрироваться.

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

Не забудьте записать свои учетные данные, они понадобятся вам для публикации. Вы также получите электронное письмо для подтверждения вашей учетной записи.

Написание вашего кода

  1. Создайте папку под названием remove-array-duplicates.
  2. Откройте VSCode и откройте эту папку, удалите массив-дубликаты.
  3. Откройте новое окно Терминала.
  4. Теперь инициализируйте свой package.json со значениями по умолчанию.
npm init -y

Вы можете изменить значения по умолчанию в package.json позже.

5. Откройте файл package.json.

{
  "name": "remove-array-duplicates",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

Package.json - это самый важный файл с точки зрения создания и публикации пакета NPM. Без него вы не сможете публиковать.

Файл, названный в главном ключе, в данном случае index.js, будет точкой входа в ваш пакет после его установки пользователем. Именно то, что вы экспортируете из этого файла, предоставит пользователю функциональность после установки пакета.

Важное примечание: имена пакетов в реестре NPM должны быть уникальными. Следовательно, если значение для ключа name (в нашем случае remove-array-duplicates) уже существует в реестре NPM, ваша публикация будет потерпеть поражение.

Вы можете выполнить поиск имени в реестре NPM, войдя здесь и выполнив поиск по имени. Если пакет существует, измените поле имя в файле package.json на уникальное. Скорее всего, вам это понадобится.

6. Создайте новый файл с именем index.js.

7. Введите следующий код в index.js.

let uniqueArr = []
function removeArrayDuplicates(arr){
// Accepts an array from which the duplicates
// will be removed
if (!Array.isArray(arr)){
  
    arr = []
}
let theSet = new Set(arr)
let uniqueArr = [...theSet]
return uniqueArr
}

Тестирование вашего кода локально

  1. Добавьте код, который вы видите ниже полужирным шрифтом, для локального тестирования.
let uniqueArr = []
function removeArrayDuplicates(arr){
// Accepts an array from which the duplicates
// will be removed
if (!Array.isArray(arr)){
  
    arr = []
}
let theSet = new Set(arr)
let uniqueArr = [...theSet]
return uniqueArr
}
// Testing Only
let myNums = [1,2,3,1,4,1,2,5,3,4]
let uniqueNums = removeArrayDuplicates(myNums)
console.log(uniqueNums)

2. В типе окна Терминал,

node index

3. Ваш результат должен быть похож на этот.

Публикация вашего пакета

  1. Замените тестовый код оператором module.exports.

Все, что вы экспортируете, будет доступно для импорта, когда другие установят пакет.

let uniqueArr = []
function removeArrayDuplicates(arr){
// Accepts an array from which the duplicates
// will be removed
if (!Array.isArray(arr)){
  
    arr = []
}
let theSet = new Set(arr)
let uniqueArr = [...theSet]
return uniqueArr
}
module.exports = removeArrayDuplicates

2. Теперь давайте проверим ваш package.json.

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

Вы увидите, что я изменил имя в своем package.json, добавил ключевые слова и информацию об авторе.

{
  "name": "rem-arr-dups",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": ["remove","array","duplicates"],
  "author": "gravity-well <[email protected]>",
  "license": "ISC"
}

3. Войдите в реестр NPM.

npm login

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

4. Теперь мы можем опубликовать это. В типе терминала

npm publish

Вы должны увидеть подобные уведомления в Терминале, а также получить электронное письмо с подтверждением успешности или неудачи.

npm notice 
npm notice package: [email protected]
npm notice === Tarball Contents ===
npm notice 304B index.js    
npm notice 289B package.json
npm notice === Tarball Details ===
npm notice name:          rem-arr-dups
npm notice version:       1.0.0
npm notice package size:  484 B
npm notice unpacked size: 593 B
npm notice shasum:        77f1d53e8cb9f07318874706329c9e1c375f40fc
npm notice integrity:     sha512-VdzLzFcZVBgk+[...]rN7L2nfpRxr/w==
npm notice total files:   2
npm notice
+ [email protected]

Тестирование пакета (установка npm)

  1. Создайте новую папку для тестирования.
  2. Откройте новый экземпляр VSCode (вы не можете установить пакет в то же место, где вы его создали).
  3. Откройте окно терминала и установите пакет (используйте имя, используемое в вашем package.json при публикации).
npm install the-name-you-gave-your-package

В ваш проект добавлена ​​папка node_modules.

4. Создайте новый файл с именем test.js и введите следующий код.

// For the require statement, use the name you gave your published package
const removeArrayDuplicates = require('rem-arr-dups') 
let myNums = [1,2,3,1,4,1,2,5,3,4]
let uniqueNums = removeArrayDuplicates(myNums)
console.log(uniqueNums)

5. Запустить файл в Терминале с помощью.

node test

Альт!

Как правило, мы должны потребовать пакет. Если вы написали, например, компонент React или другой фрагмент кода ES6, вы должны использовать оператор import вместо require.

После импорта пакета мы можем использовать все, что было экспортировано. В этом случае функция removeArrayDuplicates ().

Внесение изменений

Если вам нужно внести изменения,

  • Внесите изменения.
  • Откройте package.json и измените номер версии.
  • Войдите в реестр NPM и снова запустите npm publish.

Если вы не измените номер версии, публикация не удастся.

Вывод

Здесь мы создали простой пакет NPM. Любой желающий может установить его и использовать.

После публикации пакета вы можете выполнить рефакторинг кода или добавить функциональность. В этом случае измените номер версии в package.json перед публикацией.

Также предлагается добавить README.MD, файл уценки, который дает описание и некоторые примеры использования вашего пакета.

Вот как мой выглядит в реестре NPM. Я добавил README.MD.

Спасибо, что прочитали и написали код!

Читайте все, что хотите, и помогите мне продолжать писать, присоединившись к Medium



Полезные ресурсы: