Как сделать хороший, крошечный пакет npm и опубликовать его

kak sdelat horoshij kroshechnyj paket npm i opublikovat ego?v=1656569774

Вы не поверите, как это просто!

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

TL; DR

Модуль npm только нужен файл package.json из имя и версия свойства.

Эй!

Вот ты где.

Просто крошечный слон, у которого вся жизнь впереди.

Вы не специалист в создании пакетов npm, но вы хотите узнать, как это сделать.

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

«Я не могу с этим конкурировать».

Ну, я здесь, чтобы сказать, что ты можешь!

Больше никаких сомнений в себе.

Давайте начнем!

Ты не слон

Я имел в виду это метафорически.

Вы когда-нибудь задумывались, как называют слонят?

Конечно, есть. Слоненок называют теленком.

я верю в тебя

Сомнение в себе реально.

Потому никто никогда не делает ничего классного.

Вы думаете, что не добьетесь успеха, поэтому вместо этого ничего не делаете. Но потом вы прославляете людей, делающих все замечательные вещи.

Супер иронично.

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

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

Комплексная инструкция

Я пообещал, что не буду…

…но я полностью сделал.

Они не так плохи. Ты меня простишь когда-нибудь.

Шаг 1: аккаунт npm

Вам нужен один. Это только часть сделки.

Зарегистрируйтесь здесь.

Шаг 2: вход

Вы создали аккаунт npm?

Да, ты сделал.

Круто.

Я также предполагаю, что вы можете использовать командную строку/консоль и т.д. Теперь я буду называть это терминалом. Наверное, есть разница.

Выделите свой терминал и введите:

npm adduser

Вы также можете использовать команду:

npm login

Выберите любую команду.

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

Вы должны получить сообщение, подобное этому:

Logged in as bamblehorse to scope @username on https://registry.npmjs.org/.

Хорошо!

Сделаем пакет

Поначалу нам нужна папка для хранения нашего кода. Создайте его удобным для вас способом. Я звоню по посылке крошечный потому что он действительно очень маленький. Я добавил несколько команд терминала для тех, кто с ними не знаком.

md tiny

В этой папке нам нужно a package.json файл. Если вы уже используете Node.js, вы уже встречали этот файл. Это файл JSON, содержащий информацию о вашем проекте и имеющий множество различных опций. В этом уроке мы сосредоточимся только на двух из них.

cd tiny && touch package.json

Но как он может быть маленьким?

Действительно маленький.

Все учебники создания пакета npm, включая официальную документацию, говорят вам ввести определенные поля в вашем package.json. Мы будем продолжать пытаться опубликовать наш пакет с наименьшим количеством, пока он не заработает. Это своего рода TDD для минимального пакета NPM.

Пожалуйста, запиши: Я показываю вам это, чтобы продемонстрировать, что создание пакета npm не должно быть сложным. Чтобы быть полезным обществу в целом, пакет нуждается в нескольких дополнительных функциях, и мы рассмотрим это позже в статье.

Публикация: первая попытка

Чтобы опубликовать свой пакет npm, вы запускаете команду с правильным названием: npm опубликовать.

Итак, в нашей папке есть пустой package.json, и мы попробуем:

npm publish

Опа!

Мы получили ошибку:

npm ERR! file package.json
npm ERR! code EJSONPARSE
npm ERR! Failed to parse json
npm ERR! Unexpected end of JSON input while parsing near ''
npm ERR! File: package.json
npm ERR! Failed to parse package.json data.
npm ERR! package.json must be actual JSON, not just JavaScript.
npm ERR!
npm ERR! Tell the package author to fix their package.json file. JSON.parse

npm это не очень нравится.

Справедливо.

Забастовка вторая

Давайте дадим нашему пакету имя в файле package.json:

{
"name": "@bamlehorse/tiny"
}

Вы могли заметить, что я добавил свое имя пользователя npm в начале.

о чем это?

С помощью имени @bamblehorse/tiny вместо просто крошечныйсоздаем пакет под объем нашего имени пользователя. Это называется а пакет со сферой действия. Это позволяет нам использовать короткие названия, которые уже могут быть использованы, например, the крошечный пакет уже существует в npm.

Вы могли видеть это с популярными библиотеками, такими, как Angular Framework от Google. У них есть несколько пакетов с областью действия, таких как @angular/core и @angular/http.

Достаточно круто, а?

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

npm publish

На этот раз ошибка меньше – прогресс.

npm ERR! package.json requires a valid “version” field

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

Не беспокойтесь слишком о понимании более сложных имен версий, но вот их краткое описание того, как работают основные:

Учитывая номер версии MAJOR.MINOR.PATCH, увеличьте:

1. ОСНОВНАЯ версия, когда вы вносите несовместимые изменения API,

2. MINOR версия, когда вы добавляете функциональные возможности обратно обратно совместимым способом, и

3. Исправьте версию, когда вы делаете возвратно-совместимые исправления ошибок.

Дополнительные метки для метаданных предыдущего выпуска и сборки доступны как расширение формата MAJOR.MINOR.PATCH.

https://semver.org

Публикация: Третья попытка

Мы предоставим нашему package.json версию: 1.0.0 — первый большой выпуск.

{
"name": "@bamblehorse/tiny",
"version": "1.0.0"
}

Публикуем!

npm publish

Ой, черт.

npm ERR! publish Failed PUT 402npm ERR! code E402npm ERR! You must sign up for private packages : @bamblehorse/tiny

Позвольте объяснить.

Пакеты Scoped автоматически публикуются приватно, поскольку они не только полезны для отдельных пользователей, как мы, но и используются компаниями для обмена кодом между проектами. Если бы мы опубликовали обычный пакет, то наше путешествие здесь бы закончилось.

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

npm publish --access=public

Бум!

+ @bamblehorse/tiny@1.0.0

Мы получаем знак плюс, имя нашего пакета и версию.

Мы сделали это – мы в клубе npm.

Я в восторге.

Вы должны быть взволнованы.

1*oBaHFxAXy-BWtzyAKeMGBQ
отредактировано дружеским синим

Вы это поймали?

npm любит вас

мыло!

Первая версия есть!

Давайте перегруппируемся

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

Нам тоже нужен код.

Серьезно.

У нас еще нет кода.

GitHub – отличное место для размещения вашего кода. Давайте создадим новое хранилище.

1*NGHjzcMgnzBtmSFfQuqVow

ПРОЧТИТЕ МЕНЯ!

Я привыкла печатать ПРОЧТИТЕ вместо readme.

Вам больше не нужно это делать.

Это смешная конвенция.

Мы собираемся добавлять несколько фанковых значков от shields.io, чтобы люди знали, что мы очень крутые и профессиональные.

Вот один, который дает людям знать текущую версию нашего пакета:

1*ZbzgGAfTeBlqNH2gtLy-GQ
npm (охват)

Этот следующий значок интересен. Это не удалось, потому что у нас действительно нет кода.

Мы действительно должны написать какой-то код…

1*mxZkgckYLK16mhkRte1Bqw
Размер пакета npm (минимизированный)
1*gY_-15Q4rLU129dXLg5ibQ
Наше крохотное чтение

Лицензия на код

Это название, безусловно, является ссылкой на Джеймса Бонда.

Я действительно забыл добавить лицензию.

Лицензия просто дает людям знать, в каких ситуациях они могут использовать ваш код. Есть много разных.

В каждом репозитории GitHub есть отличная страница под названием Insights, где вы можете проверить разную статистику, включая стандарты сообщества для проекта. Я собираюсь добавить свою лицензию оттуда.

1*hkUyteXGLLTDt0WwKEpZ6A
Рекомендации сообщества

Тогда вы перешли на эту страницу:

1*ZWgFtTjkB8RpBDfRsCsLUQ
Github дает вам полезный результат каждой лицензии.

Код

У нас до сих пор нет ни одного кода. Это немного смущает.

Давайте добавим немного сейчас, прежде чем мы потеряем все доверие.

module.exports = function tiny(string) {
  if (typeof string !== "string") throw new TypeError("Tiny wants a string!");
  return string.replace(/\s/g, "");
};
Бесполезно — но красиво

Там.

А крошечный функция, которая удаляет все пробелы из строки.

Итак, все, что требует пакет npm, это файл index.js файл. Это точка входа в ваш пакет. Вы можете сделать это разными способами, поскольку ваш пакет становится сложнее.

Но пока это все, что нам нужно.

мы уже там?

Мы так близко.

Возможно, нам следует обновить наш минимальный package.json и добавьте некоторые инструкции к нашему readme.md.

Иначе никто не узнает, как пользоваться нашим прекрасным кодом.

package.json

{
  "name": "@bamblehorse/tiny",
  "version": "1.0.0",
  "description": "Removes all spaces from a string",
  "license": "MIT",
  "repository": "bamblehorse/tiny",
  "main": "index.js",
  "keywords": [
    "tiny",
    "npm",
    "package",
    "bamblehorse"
  ]
}
Описательный!

Мы добавили:

  • description: краткое описание упаковки
  • репозиторий: дружественный GitHub — чтобы вы могли писать имя пользователя/репо
  • лицензия: MIT в этом случае
  • main: точка входа в ваш пакет, относительно корня папки
  • ключевые слова: список ключевых слов, используемых для обнаружения вашего пакета в поиске npm

readme.md

Мы добавили инструкции по установке и использованию пакета. Хорошо!

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

Готово

Давайте опубликуем наш красивый пакет.

Версия

Сначала мы обновим версию с помощью команды npm version.

Это большой выпуск, поэтому мы вводим:

npm version major

Какие выходы:

v2.0.0

Публикуйте!

Давайте запустим нашу новую любимую команду:

npm publish

Это делается:

+ @bamblehorse/tiny@2.0.0

Крутая штука

Пакет Phobia дает вам отличный результат вашего пакета npm. Вы также можете просмотреть каждый файл на таких сайтах как Unpkg.

Спасибо

Это было прекрасное путешествие, которое мы только что совершили. Надеюсь, вам понравилось так же, как и мне.

Пожалуйста, дайте мне знать, что вы думаете!

Пакет, который мы только что создали здесь:

★ Github.com/Bamblehorse/tiny ★

0*qmkE3zw9beF6fP_0
«Слон, частично погруженный в воду». Якоб Оуэнс на Unsplash

Следите за мной на Twitter, Medium или GitHub

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *