[Перевод] Создать и опубликовать небольшой и красивый пакет npm проще, чем вы думаете!

Оригинальный адрес:How to make a beautiful, tiny npm package and publish it

Оригинальный автор:Jonathan Wood

Перевод с:Программа перевода самородков

Постоянная ссылка на эту статью:GitHub.com/rare earth/gold-no…

Переводчик:snowyYU

Корректор:ElizurHz, Park-ma

Вы не представляете, как просто создать и опубликовать небольшой, но красивый пакет npm!

Photo by Chen Hu on Unsplash

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

TL;DR

npm-модульТолькодолжен содержатьnameа такжеversionАтрибуты файла Package.json.

Привет!

посмотри на себя.

Как невежественный слоненок.

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

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

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

Ну, на самом деле вы можете!

Перестаньте сомневаться в себе.

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

ты не слон

этосравнение.

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

Конечно, ты думал. Слоненок называетсяТелец.

Я верю тебе

ПодозреватьЭто существует.

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

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

Так иронично.

Итак, я покажу вам минимально возможный модуль npm.

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

сложные инструкции

Обещаю, не будет...

... но я действительно делаю.

Не так уж и плохо. Однажды ты простишь меня.

Шаг 1: учетная запись npm

Вам нужен аккаунт. Это часть процесса.

зарегистрироваться здесь.

Шаг 2: Войти

Вы уже зарегистрировали учетную запись npm?

Да, вы создали его.

Потрясающий.

Я также рекомендую вам использоватькомандная строка/консольи т.п. Отныне я буду называть их терминалами вместе. Здесь вы можете увидеть разницу между нимиЭто понятно.

Откройте терминал и введите:

npm adduser

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

npm login

Выберите одного из этих двух и следуйте за вами до самой смерти.

вы получите тот, который позволит вам войтиusername,passwordа такжеemailнамекать. Заполните их на соответствующие позиции!

Вы получите приглашение, подобное следующему:

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

Потрясающий!

начать разработку пакета

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

md tiny

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

cd tiny && touch package.json

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

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

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

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

Выпуск: первая попытка

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

Итак, давайте попробуем это в папке, которую мы создали с пустым 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заменятьtiny, мы создадимscopeОдин пакет следующего пакета. Это называетсяscoped package. Это позволяет нам использовать в качестве имени пакета имя, которое уже используется другими пакетами, например,tinyМешокуже существует в npm.

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

Супер круто, правда?

Попробуем опубликовать наш пакет во второй раз:

npm publish

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

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

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

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

Для данной версии marjor.minor.patch инкрементальные правила следующие:

Изменение номера ОСНОВНОЙ версии указывает на то, что новая версия создала API, несовместимые с более ранними версиями и т. д.

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

Изменение номера версии PATCH указывает на то, что вы внесли обратно совместимое исправление ошибки в новую версию.

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

semver.org

Размещено: 3-я попытка

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

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

Начать публикацию!

npm publish

Упс.

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

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

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

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

npm publish --access=public

Бум!

+ @bamblehorse/tiny@1.0.0

Получаем знак +, название и номер версии нашего пакета.

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

так взволнован.

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

Накройте конфиденциальную информацию дружественным синим цветом

Ты нашел это?

нпм люблю тебя

Такой милый!

версия 1Просто лежи!

рефакторинг

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

Нам также нужен код, чтобы сделать это.

Говорить правду.

Мы еще не написали никакого кода.

GitHub — отличное место для размещения кода. Сначала построй одинновый склад.

ПРОЧТИ МЕНЯ!

у меня былоREADMEРедактировать текстописывать.

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

Будет весело.

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

Следующее может сообщить другим о нашей текущей версии пакета:

npm (scoped)

Следующий значок более интересен. Он говорит предупреждение, потому что у нас еще нет кода.

Мы должны написать код...

npm bundle size (minified)

Наше краткое введение

код лицензии

Название определенно относится кJames Bond.

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

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

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

мнение сообщества

Затем вы нажимаете на эту страницу:

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: Знакомство с пакетом
repository: подходит для адресов GitHub — так что вы можете написать этот форматusername/repo
license: Вот сертификация MIT
main: файл входа пакета, расположенный в корневом каталоге папки
keywords: добавьте несколько ключевых слов, чтобы ваш пакет было легче найти.

readme.md

Очень богатый!

Мы добавили инструкции по установке и использованию пакета. Потрясающий!

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

Заканчивать

Начните публиковать наши потрясающие наборы.

Версия

Во-первых, мы используемnpm versionкоманда для обновления версии пакета.

Это основная версия, поэтому мы набираем:

npm version major

он выведет:

v2.0.0

выпускать!

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

npm publish

Заканчивать:

+ @bamblehorse/tiny@2.0.0

классная вещь

Package PhobiaМожет предоставить отличное резюме для вашего пакета. Вы также можетеUnpkgСмотрите файлы в пакете на сайте.

Спасибо за прочтение

Мы только что пережили замечательную поездку. Надеюсь, вам понравится, как и мне.

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

Дайте пакету, который мы только что создали, звезду:

★GitHub.com/BA МБ лошадь…

«Слон, большая часть тела которого погружена в воду».Jakob Owensвыстрел, изUnsplash

пожалуйста следуйте за мнойTwitter,MediumилиGitHub.

Если вы обнаружите ошибки в переводе или в других областях, требующих доработки, добро пожаловать наПрограмма перевода самородковВы также можете получить соответствующие бонусные баллы за доработку перевода и PR. начало статьиПостоянная ссылка на эту статьюЭто ссылка MarkDown этой статьи на GitHub.

Программа перевода самородковэто сообщество, которое переводит высококачественные технические статьи из ИнтернетаНаггетсДелитесь статьями на английском языке на . Охват контентаAndroid,iOS,внешний интерфейс,задняя часть,блокчейн,товар,дизайн,искусственный интеллектЕсли вы хотите видеть более качественные переводы, пожалуйста, продолжайте обращать вниманиеПрограмма перевода самородков,официальный Вейбо,Знай колонку.