Вам всегда интересно, как работает npm в современных веб-приложениях? Создание собственного пакета npm — это отличный способ изучить npm, внести свой вклад в сообщество открытого исходного кода и поделиться своим кодом с другими. В этом руководстве мы покажем вам процесс создания самого первого пакета npm. Не волнуйтесь, если вы новичок в этом деле — я начну с основ и приведу пошаговый пример, который поможет вам лучше понять процесс.
Оглавление
- Введение в пакеты npm
- Предварительные требования
- Создание первого пакета 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
- Если у вас нет учетной записи npm, создайте ее на сайте npmjs.com.
- Войдите в свою учетную запись 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. Приятного кодирования! 👨💻