7 простых NPM трюков

• Используй ярлыки
• Инициализация нового пакета
• Установка нескольких пакетов в одной команде
• Список доступных скриптов
• Мониторинг и очистка своего проекта
• Запуск скриптов до и после других скриптов (Pre and Post Hooks)
• Поиск пакета в интернете

В этой статье мы рассмотрим полезные трюки, которые значительно улучшат наш способ работы с NPM.

Используй ярлыки

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

• Вместо npm install <package> пишем npm i <package>.

• Вместо npm install --save <package> пишем npm i -S <package>.

• Вместо npm install --save-dev <package> пишем npm i -D <package>.

• Вместо npm install --global <package> пишем npm i -G <package> или npm i -g <package>.

• Вместо npm test пишем npm t.

Более подробно здесь.

Инициализация нового пакета

Мы все хорошо знакомы с npm init - это первое, что мы делаем при создании нового проекта. Но, все те вопросы на которые нам нужно ответить, что бы создать package.json, немного раздражают, тем более что потом мы всё равно их меняем. Что бы не отвечать на вопросы, мы можем выполнить:

npm init -y что бы быстро создать package.json.

Установка нескольких пакетов в одной команде

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

npm i -S react redux react-redux

Список доступных скриптов

Что бы посмотреть список доступных скриптов, вместо того чтобы открывать файл package.json и смотреть раздел scripts, мы можем запустить команду - npm run. Она выведет список всех доступных скриптов.

Дополнительная опция - установить ntl. Установить можно так: npm i -g ntl или npx ntl, а затем запустить ntl в папке проекта. ntl также позволяет запускать скрипты, что делает его весьма удобным.

Мониторинг и очистка своего проекта

Подобно просмотру доступных скриптов, можно глянуть какие зависимости есть в нашем проекте. Мы можем еще раз открыть файл package.json и посмотреть, но мы уже знаем, что можем сделать по-другому, например:

npm ls --depth 0

Чтобы вывести список глобально установленных пакетов, запускаем ту же команду только с флагом -g:

npm ls -g --depth 0

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

npm dedupe

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

npm outdated

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

npm update

Если мы используем символ ^ перед нашими версиями в package.json, то основная (major) версия не будет обновляться (поэтому будут желтые строки). В целом, это хорошо, так как при обновлении до новой основной версии могут возникнуть критические изменения.

Если же мы хотим обновить всё до последней версии, можем использовать инструмент npm-update-all. Для этого нужно запустить эту команду в папке нашего проекта.

npx npm-update-all

Здорово! Теперь мы получили последнюю версию всех наших зависимостей. Наш package.json также обновился. ⚠️ Будь в курсе переломных изменений ⚠️

Если нам нужно установить последнюю версию конкретного внешнего пакета - можем использовать npm i <package>@latest

Запуск скриптов “до и после” других скриптов (Pre and Post Hooks)

Pre and post Hooks - они позволяют нам выполнять скрипты до и после того, как мы вызываем определенный скрипт. Всё, что нам нужно сделать - это определить новые скрипты с тем же именем, что и наш основной скрипт. Тем не менее, они имеют префикс «pre» или «post», в зависимости от того, выполняется сценарий перед основным сценарием или после него.

Например:

"scripts": {
  ...
  "say-hello": "echo 'Hello World'",
  "presay-hello": "echo 'I run before say-hello'",
  "postsay-hello": "echo 'I run after say-hello'"
}

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

Поиск пакета в интернете

Если у тебя есть необходимость найти документацию для пакета, то вместо того, чтобы переключаться на браузер и искать в Google, мы можем это сделать через терминал (командная строка).

npm repo <package> Команда открывает репозиторий указанного пакета в браузере.

npm home <package> Команда открывает домашнюю страницу указанного пакета. Если выполнить её без указанного пакета, то откроется домашняя страница npm с именем корневой папки.

npm docs <package> Открывает документацию указанного пакета.