Как сделать свой npm пакет

Обновлено: 06.07.2024

Также поддерживается(?) Windows. Для обхода проблем с отсутствующими rm используйте пакет rimraf

Что же, давайте попробуем уйти от grunt/gulp.

Запуск нескольких заданий

Для запуска нескольких заданий одной коммандой можно использовать pre- и post- варианты команды (удобно, когда выполнение команды требует выполнения предварительных действий, минификаци, например), или можно использовать && или & связку.

./build/index.css", "build:js": " browserify -d ./js/app.js -o ./build/app.js", "prebuild": "npm run lint", "build": "npm run build:css && npm run build:js", >">

npm run build сначала прогонит проверку lint-ом (prebuild- комманда), затем соберет css, затем js. Измените && на & и собирайте одновременно стили и приложение одновременно.

Одна из "революционных" фич gulp, передача потока информации между заданиями через канал, что в отличии от grunt (где все происходит через сохранение - считывание файлов) позволяет работать быстрее. Ну и прочий рекламный шум. Тоже мне, новость. Мы тоже так умеем.

Здесь stdout команды node-sass передается по анонимному каналу на вход postcss , обработанная информация дампится в файл index.css .

Тa же команда для gulp:

//TODO: причесать пример сборки css в grunt/gulp

Можно связать git и версионирование файлов. npm version patch изменяет 1.1.1 -> 1.1.2 npm version minor изменяет 1.1.1 -> 1.2.0 npm version major изменяет 1.1.1 -> 2.0.0 Дополнительно создаст коммит, тэг. Название тегов, текст коммита настраивается.

Добавление банера в файл

./samples/build/index.css", "prebuild:css": "npm run add:header", "build:css": " node-sass ./samples/style/index.scss >> ./samples/build/index.css" > . ">

в config прописываем текст банера, формат времени для команды date . В скрипте будем обращаться к ним через $npm_package . prebuild:css создает строку и дампит ( > ) в файл. build:css дописывает ( >> ) результат своей работы в файл. Можно без prebuilder-a

Другой вариант. более близкий нам по духу: создаем хелпер add-banner.js , в нем так же собираем информацию из package.json , как и в предыдущем примере (теперь можно и пробелы между словами баннера добавить в конфиг файл). Единственно, v8 не работает toLocaleString() и на русском дату не получите. Распарсите в хелпере, если критично.

Практически всегда, билдящие скрипты очищают дирректорию сохранения.

в Windows нет rm , ииспользуйте пакет rimraf

//TODO: добавить примеров

Будем собирать из sass в один файл, минифицировать и добавлять баннер в заголовок (с датой- временем компиляции). Бенчмарк минификаторов Минификатор можно выбрать на свой вкус. В нашем примере, воспользуемся csswring . Это плагин к PostCSS. PostCSS позволяет передавать список используемых плагинов и их параметры из config файла, так тто нам не придется писать в коммандном стиле длинную портянку параметров. Для добавления баннеров можно воспользоваться postcss-banner . Позволяет добавить баннер в начало или конец файла. Но не позовляет добавить к тексту баннера время компиляции.

Config файл в этом случае выглядел бы так.

А строчка в разделе scripts для билда css выглядеть будет так:

Но в нашем, конкретном, случае нежелание добавлять даты нас очень печалит, так что мы снова используем свой add-banner.js , убрав из config.postcss.json упоминания о postcss-banner

в scss прописываем

в настройках postcss-assets нужно прописать папку, с которой начинать искать svg-шки.

postcss-assets - инлайнит в виде url(data:image/svg+xml. )

Сборка и минификация JS

Задача схожа со сборкой css. Сборка в один файл, минификация, соурсмап, баннер с временем компиляции.

Для develop нам достаточно знать, что browserify создает встроенный sourcemap (ключ -d ). Поэтому, нам вполне достаточно:

Для deploy, можно выбрать любой минификатор. Такие минификаторы как minifyify , uglifyify работают как плагины к browserify .

Для более сложный DEBUG состояний можно использовать Conditional compilation

Для начала нам нужно установить Node.js, npm идёт вместе с ним. Затем нужно обновить версию npm, так как он обновляется несколько чаще, чем Node.js:

Проверить версию npm можно командой:

У меня вывело 4.5.0.

Установка пакетов npm

Существует два способа установки пакетов npm: локально и глобально.

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

Для проверки этой команды вы можете выполнить:

Использование установленного пакета npm

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

Поле version определяет версию в формате x.x.x.

Зависимости от других пакетов

Идея версионирования: патчи, минорные и мажорные версии

Идея использования трёх чисел, разделённых точками, в качестве версии состоит в следующем (например, если текущий пакет 1.0.0):

Патчи или исправления ошибок и незначительные изменения увеличивают последнее число (1.0.1).
Минорные версии. Новые возможности, которые не ломают старый код увеличивают второе число (1.1.0).
Мажорные версии. Изменения, ломающие совместимость со старым кодом увеличивают самое первое число (2.0.0).

1.0, 1.0.x или ~1.0.4 будет использовать последнюю версию патча с исправлениями ошибок (для третьего варианта начиная с версии 1.0.4).
1, 1.x или ^1.0.4 будет использовать последнюю минорную версию.
* или x всегда будет использовать последнюю версию.

Обновление зависимостей

Удаление зависимостей

Установка пакета npm глобально

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

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

В этом случае вам нужно сделать одно из следующих:
1. Изменить права доступа к каталогу, который npm использует по умолчанию.
2. Изменить каталог по умолчанию для npm.
3. Установить node c помощью пакетного менеджера.

Обновление глобальных пакетов npm

Для обновления пакетов npm, установленных глобально, используйте команду:

Node.js за 5 минут

Понимание того, что такое Node.js поможет вам лучше разобраться с npm. В двух словах — Node.js это интерпретатор языка JavaScript. Сам по себе Node.js является приложением, которое получает на входе и выполняет его.

Давайте создадим простую программу. Создайте файл helloworld.js и поместите в него следующий код:

Теперь откройте терминал, зайдите в папку с вашей программой и выполните команду node helloworld.js . Вместо helloworld.js может быть любой другой файл с . Убедитесь, что у вас установлен Node.js. Результат выполнения программы будет выглядеть примерно так:

Результат выполнения программы

Пакеты в Node.js

Вкратце, пакетом в Node.js называется один или несколько , представляющих собой библиотеку или инструмент.

npm (аббр. node package manager, система управления пакетами એ ) — это стандартный менеджер пакетов, автоматически устанавливающийся вместе с Node.js. Он используется для скачивания пакетов из облачного сервера npm, либо для загрузки пакетов на эти сервера.

Файл package.json

Файл package.json содержит в себе информацию о вашем приложении: название, версия, зависимости и тому подобное. Любая директория, в которой есть этот файл, интерпретируется как Node., даже если вы не собираетесь публиковать его.

Способ использования файла package.json зависит от того, собираетесь ли вы скачивать пакет или публиковать его.

Скачивание пакетов

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

Также для скачивания пакетов вы можете использовать package.json. Создайте в директории вашего проекта файл package.json, и добавьте в него следующий код (мы не указываем название нашего пакета и версию, мы не собираемся его публиковать; мы указываем название и версию пакетов для загрузки):

Затем сохраните файл и выполните в терминале команду npm install .

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

Если вы используете package.json для скачивания пакетов, то получается, что вы создаёте пакет для скачивания пакетов. Я знаю, что это странно, но это работает.

Если пакет имеет зависимости, то npm найдёт их через package.json загружаемого пакета и скачает их. В нашем случае у пакета тоже есть файл package.json с прописанными в нём зависимостями.

Публикация пакета

Чтобы опубликовать пакет, вам потребуется собрать все исходные коды и файл package.json в одной директории. В package.json должны быть указаны название, версия и зависимости пакета. Например:

Посмотрев на этот код, мы можем сказать, что пакет зависит от пакета . Опубликовать пакет можно с помощью комадны npm publish .

Использование пакета в качестве исполняемого файла

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

Теперь вы знаете, что такое пакет и как он может зависеть от других пакетов. Также вы узнали, как npm работает с пакетами. Давайте перейдём от теории к практике и установим Grunt.

Установка Grunt с помощью npm

Grunt это , позволяющий автоматизировать многие повседневные задачи вроде сжатия изображений и минификации .

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

Создайте директорию для вашего проекта. С точки зрения сервера эта директория будет корневой.
Откройте эту директорию через терминал.
Теперь скачайте и установите Grunt. Аргумент -g указывает npm на то, что пакет следует скачивать в основную папку для хранения пакетов, а не в текущую директорию.
Для каждой задачи, выполняемой grunt’ом, есть отдельный пакет. Например, можно найти пакеты для минификации JavaScript, склеивания файлов и так далее. Также вы можете создавать собственные пакеты для выполнения задач; такие пакеты будут называться . Давайте установим нужные нам пакеты в директирии нашего проекта. Для этого нам понадобится создать файл package.json и поместить в него код ниже. Затем выполните команду npm install . Она загрузит нужные пакеты. Помните о том, что директория, содержащая package.json, сама является пакетом.
Мы установили пакет для склеивания файлов. Теперь нам надо описать задачу для Grunt. Это делается с помощью файла Gruntfile.js. Когда вы выполняете команду grunt в директории проекта, Grunt будет искать Gruntfile.js, чтобы загрузить и выполнить задачи. Давайте подключим наш плагин для склеивания файлов и опишем простую задачу.
По этому принципу вы можете сами скачать и подключить нужные плагины.
Теперь вы можете запустить команду grunt в директории вашего проекта, чтобы склеить .

В этой статье я попробовал объяснить то, как работает npm для новичков в Node.js. Теперь вы должны быть способны устанавливать и использовать различные Node.. Спасибо за чтение!

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

Для отправки комментария вам необходимо авторизоваться.

Ограничение ответственности

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

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

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

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

В течение некоторого времени я использовал шаблон, который почти полностью устраняет человеческое взаимодействие, поскольку я склонен все портить, когда набираю что-то руками. Это хорошо работает для автоматической публикации из CI или при публикации вручную из терминала. Я не ввожу вручную npm publish уже некоторое время, и это хорошо.

Перво-наперво, хорошие тесты

Я большой поклонник проведения тестов со 100% охватом. Это не идеальная защита от всех проблем, но это позволяет мне не совершать разные глупости, например, предполагая, что я знаю, что делает моя программа.

Я использую библиотеку тестов tap, но вы можете сделать это с помощью любой библиотекой тестирования, которая поддерживает охват кода. Если она не поддерживает охват кода из коробки, вы можете использовать nyc для запуска любого процесса Node.js с отслеживанием охвата.

Чтобы использовать его, запустите npm i tap -D, а затем добавьте его в раздел scripts в package.json:

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Команда npm version

Команда npm version устанавливает, какой должна быть следующая версия, редактирует файл package.json и даже помещает его в git с подписанным тегом. Ее преимущество заключается в том, что npm version также предотвращает изменение версии, когда вы не отслеживали изменения в рабочем каталоге git, и предоставляет некоторые подключаемые скрипты, которые могут выполнять другие действия до или после повышения версии.

В разделе scripts файла package.json я добавляю скрипт preversion, который запускает тесты:

Теперь, прежде чем я смогу поднять версию, npm проверит, чтобы тесты были пройдены. Если тест не пройден (или если охват не на 100%), то команда не выполнится.

Публикация при изменении версии

Поднять версию — это хорошо, но пришло время поделиться ею. Наряду с preversion команда postversion выполняет действия после повышения версии. Итак, давайте подключимся, чтобы опубликовать пакет.

Синхронизация Git и npm

Это запускает две команды. Первая вводит все ветви, а вторая — все теги (включая мой недавно опубликованный тег версии).

Ветки и dist-tag

Иногда я работаю над какой-нибудь большой функцией для нового релиза, который еще не готов к прайм-тайму. В функциональной ветке я изменяю скрипты, добавляя аргумент —tag в команду npm publish, чтобы поместить его в dist-tag, отличный от latest.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Бонус: подпись версий

Git поддерживает подпись PGP с тегами коммитов. Чтобы указать npm воспользоваться этой функцией, установите эти два значения конфигурации:

Я большой поклонник Krypton. Он хранит личные ключи PGP и SSH в безопасном хранилище вашего мобильного устройства, а затем отправляет push-уведомление, чтобы оно могло что-то делать с этими ключами. Он чрезвычайно прост в настройке и в использовании, это дает вам второй аппаратный фактор для всего, что имеет значение.

Конечно, и я точно не знаю, является ли это ошибкой или так должно быть, всякий раз, когда я запускаю npm version, между коммитом, подписью, тегом и двумя SSH-соединениями, мой телефон много гудит.

Запуск npm version для тестирования и публикации

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

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

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

PS: конфигурация npm очень гибкая

Вы заметите, что я использовал в командах публикации выше —tag=. Вы также можете настроить npm другими способами. Может быть установлено любое значение конфигурации (в том числе tag в случае npm publish):

явно в командной строке, например, —tag=whatever

в среде, например, NPM_CONFIG_TAG=whatever

в файле .npmrc в корне проекта, например, tag = whatever

в файле .npmrc в домашнем каталоге

в /usr/local/etc/npmrc (или /usr/etc/npmrc в некоторых системах).

Это работает в формате наследования, поэтому, чем выше значение в этом списке, тем выше приоритет.

Для систем CI / CD это означает, что вы можете иногда устанавливать переменные среды для управления поведением команд npm без необходимости изменять код или вставлять файлы в определенные места. Если вам проще управлять им с помощью файла (например, проверяя файл .npmrc в git), то это тоже работает.

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Установка нужного npm-пакета

Заключение

NPM — это менеджер пакетов JavaScript. Чаще всего е го применяю т при работе с Node.js, однако он актуален вообще при работе с JavaScript. Установка и работа с npm-пакетами осуществляется при помощи простых команд и консоли или терминала. На самом деле, сложнее найти подходящий пакет для проекта, чем воспользоваться им через npm-менеджер.

Мы будем очень благодарны

если под понравившемся материалом Вы нажмёте одну из кнопок социальных сетей и поделитесь с друзьями.

Читайте также: