Вам всегда интересно, как работает npm в современных веб-приложениях? Создание собственного пакета npm — это отличный способ изучить npm, внести свой вклад в сообщество открытого исходного кода и поделиться своим кодом с другими. В этом руководстве мы покажем вам процесс создания самого первого пакета npm. Не волнуйтесь, если вы новичок в этом деле — я начну с основ и приведу пошаговый пример, который поможет вам лучше понять процесс.

Оглавление

  1. Введение в пакеты npm
  2. Предварительные требования
  3. Создание первого пакета NPM
  • Настройка вашего проекта
  • Написание кода пакета
  • Публикация в npm

4.Понимание package.json

  • Имя и версия
  • Описание и ключевые слова
  • Зависимости и зависимости разработчиков

5.Заключение

6.Оставайтесь на связи

1. Введение в пакеты npm

npm (Node Package Manager) — мощный инструмент, используемый разработчиками для управления и распространения пакетов JavaScript. Эти пакеты содержат код многократного использования, который можно легко использовать совместно и интегрировать в другие проекты, что экономит ваше время и усилия на пути разработки.

2. Предпосылки ⚙️

Прежде чем начать, убедитесь, что в вашей системе установлены Node.js и npm. Скачать их можно здесь.

3. Создание вашего первого пакета NPM

Настройка вашего проекта

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

mkdir my-first-npm-package
cd my-first-npm-package

Инициализируйте свой проект с помощью npm:

npm init

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

Написание кода пакета

Теперь давайте создадим простую функцию JavaScript, которую мы включим в наш пакет. Создайте файл с именем index.js в каталоге вашего проекта и добавьте следующий код:

// index.js
module.exports = {
  greet: function(name) {
    return `Hello world from ${name}! I have created my first npm package!`;
  }
};

index.js всегда является корневым каталогом всех приложений Node.js и местом, где вы начинаете писать код.

Публикация в npm

  1. Если у вас нет учетной записи npm, создайте ее на сайте npmjs.com.
  2. Войдите в свою учетную запись npm с помощью терминала:
npm login

И наконец, опубликуйте свой пакет в npm:

npm publish --access public

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

npm install {your package name}

Теперь вы можете импортировать свой пакет в любое приложение, использующее npm, следующим образом:

// app.js

// Import the npm package
const myFirstNpmPackage = require('my-first-npm-package');

// Use the greet function from the package
const greeting = myFirstNpmPackage.greet('Filip');
console.log(greeting);

// Console message: Hello world from Filip! I have created my first npm package!

4. Понимание package.json

Файл package.json является ключевым компонентом любого пакета npm. Он содержит метаданные о вашем пакете и его зависимостях.

Вот разбивка некоторых важных полей в package.json:

{
 "name": "my-first-npm-package",
 "version": "1.0.0",
 "description": "My first npm package tutorial",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1"
 },
 "repository": {
 "type": "git",
 "url": "my-first-npm-package"
 },
 "keywords": [
 "tutorial",
 "npm"
 ],
 "author": "Filip Huhta",
 "license": "ISC"
}
  • имя: В этом поле указывается имя вашего пакета npm. Оно должно быть уникальным и соответствовать рекомендациям по именованию пакетов. В данном случае пакет называется «my-first-npm-package».
  • версия:поле версии указывает текущую версию вашего пакета. Он соответствует соглашениям семантического управления версиями (SemVer), которые состоят из трех чисел, разделенных точками (например, «1.0.0»). Числа обозначают основные, второстепенные версии и версии исправлений соответственно.
  • описание: здесь вы предоставляете краткое описание того, что делает ваш пакет npm. В этом примере описание: «Мое первое руководство по пакету npm».
  • main: В этом поле указывается точка входа вашего пакета. Когда кто-то импортирует ваш пакет, будет загружен файл, указанный в поле «main». В этом случае «index.js» устанавливается в качестве точки входа.
  • сценарии. Поле «сценарии» позволяет вам определять собственные сценарии, которые можно выполнять с помощью командной строки npm. В этом примере есть «тестовый» сценарий по умолчанию, который выводит сообщение об ошибке и завершает работу с кодом состояния 1, который является значением по умолчанию, если вы просто нажмете «Ввод».
  • репозиторий. Это поле содержит информацию о репозитории контроля версий, в котором размещен исходный код вашего пакета. «Тип» указывает систему контроля версий (в данном случае «git»), а «url» должен содержать URL вашего репозитория, а не имя пакета в этом примере.
  • ключевые слова. Ключевые слова — это описательные термины, которые помогают пользователям найти ваш пакет при поиске в npm. В данном случае я выбрал ключевые слова «учебник» и «npm».
  • автор: с помощью этого поля вы можете указать авторство вашего пакета. Здесь автор упоминается как «Филип Хухта».
  • лицензия. Поле «лицензия» указывает условия лицензирования вашего пакета. Различные лицензии определяют, как другие могут использовать и распространять ваш код. В этом примере выбрана лицензия «ISC», которая используется по умолчанию.

5. Вывод

Создание вашего первого пакета npm — это захватывающий шаг на пути к тому, чтобы стать более опытным веб-разработчиком и изучить экосистему npm. Делясь своим кодом с сообществом, вы вносите свой вклад в экосистему и получаете ценный опыт. Помните, что разработка с открытым исходным кодом — это сотрудничество и обучение друг у друга.

6. Оставайтесь на связи

Если это руководство показалось вам полезным и вы хотите узнать больше, свяжитесь со мной в LinkedIn. Я регулярно делюсь советами, учебными материалами и идеями по программированию, которые могут помочь вам в вашем путешествии по программированию. Не стесняйтесь подписываться на меня, чтобы увидеть больше интересного контента! 💡

Теперь ваша очередь создавать и публиковать свои пакеты npm. Приятного кодирования! 👨‍💻