Введение

NPM - это пакетный менеджер для javascript. Многие javascript разработчики использовали на практике CLI инструменты для установки зависимостей.

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

1. Инициализация проекта

Обычно для инициализации проекта мы используем команду npm init и после заполняем информацию(название пакета, версия, автор и т.д.). Можно использовать альтернативную версию инициализации с автоматической генерацией package.json используя npm init -y.

Так же можно установить значение заполняемых полей по умолчанию используя npm config.

npm config set init-author-name "Micasa Acerman"
npm config set init-author-email "chrimsonm@gmail.com"

Еще можно расширить базовые возможности npm init указав дополнительный js скрипт.

npm config set init-module <путь-к-директории>

2. Установка зависимостей с других ресурсов

Пакетный менеджер ноды позволяет устанавливать зависимости из разных источников. К примеру: bit, tarball, github, bitbucket, gist.

# Установка Bit
npm config set @bit:registry https://node.bit.dev
npm i @bit/username.collection.component

# Установка tarball установленный локально
npm i ./local-tarball-package.tgz

# Установка tarball удаленно
npm i https://abc/xyz/package.tar.gz

# Установка из github
npm i githubuser/reponame

# Установка из bitbucket
npm i bitbucket:bitbucketuser/reponame

# Установка из gist
npm i gist:gistID

3. Установка проекта с чистого листа

Можно использовать команду npm ci для чистой установки пакета. Обычно она используется в автоматизированных средах CI/CD.

npm ci

Отличие чистой установки npm ci от обычной npm install:

• установка точной версии пакета из package-lock.json
• удаляет существующий node_modules
• не записывает ничего в package.json и package-lock.json
• не устанавлиает зависимости

4. Использование сокращенного стиля записи CLI команд

Важная деталь экономящая время - использования кратково синтаксиса.

// Установка пакета
npm install <пакет>
npm i <пакет>

// Установка dev-пакета
npm install --save-dev <пакет>
npm install -D <пакет>

// Установка пакетов глобально
npm install --global <пакет>
npm install -g <пакет>

// Установка зависимостей одной командой
npm i react axios lodash

// Установка нескольких зависимостей с одинаковым префиксом
npm i eslint-{plugin-import,plugin-react,loader} express

5. NPM скрипты

Поддержка скриптов в пакетном менеджере неменее важная функция. Для перечисления всех переменных среды можно использовать npm run env - она перечисляет все переменные среды. Она так же содержит свойства пакета с префиксом npm_package_.

npm run env

Вывод команды

npm_config_save_dev=
npm_config_legacy_bundling=
npm_config_dry_run=
npm_config_viewer=man
.
.
npm_package_license=ISC         
npm_package_author_name=Micasa
npm_package_name=npm-tips-and-tricks 
.
.

Вы так же можете получить доступ к переменным окружениям env.npm_package_name.

5.1. Конфигурация своих переменных в package.json

В npm есть возможность сохранять свои переменные как переменные окружения npm c префиксом npm_package_config_. Переменные создаются в package.json в секции config.

"config": {
    "helloworld": "Hello World"
},

Проверим

npm run env | grep npm_package_config_

Мы увидим следующее

npm_package_config_myvariable=Hello World

5.2. Объявление своих скриптов

Команда npm run выведит все скрипты на выполнения в package.json. Попробуем добавить свой скрипт в package.json.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "node index.js",
    "echo-hello": "echo \"Hello\"",
    "echo-helloworld": "echo \"Helloworld\"",
    "echo-both": "npm run echo-hello && npm run echo-helloworld",
    "echo-both-in-parallel": "npm run echo-hello & npm run echo-helloworld",
    "echo-packagename": "echo $npm_package_name",
    "echo-myvariable": "echo $npm_package_config_myvariable",
    "echo-passargument": "npm run echo-packagename -- \"hello\"",
    "echo-pipedata": "cat ./package.json | jq .name > package-name.txt"
}

Попробуем посмотреть с помощью CLI заданные скрипты

# npm-tips-and-tricks (name of our package)
Lifecycle scripts included in npm-tips-and-tricks:
  test
    echo "Error: no test specified" && exit 1
  start
    node index.js
available via `npm run-script`:
  echo-hello
    echo "Hello"
  echo-helloworld
    echo "Helloworld"
  echo-both
    npm run echo-hello && npm run echo-helloworld
  echo-both-in-parallel
    npm run echo-hello & npm run echo-helloworld
  echo-packagename
    echo $npm_package_name
  echo-myvariable
    echo $npm_package_config_myvariable
  echo-passargument
    npm run echo-packagename -- "hello"
  echo-pipedata
    cat ./package.json | jq .name > package-name.txt

Для запуска скрипта выполнем npm run echo-hello.

5.3. Запуск нескольких скриптов

Для запуска нескольких скриптом можно использовать операцию &&. Эта операция запускает последовательно указанные скрипты. Если мы хотим запустить скрипты параллельно, то можно использовать операцию &.

5.4. Пример использования переменных окружения

npm run echo-packagename
# Output
> echo $npm_package_name
npm-tips-and-tricks
-------------
npm run echo-myvariable
# Output
> echo $npm_package_config_myvariable
Hello World

5.5. Передача аргументов в скрипты

Можно использовать - для передачи аргументов в npm скрипты. В примере ниже, мы передаем скрипту echo-packagename аргумент "hello".

npm run echo-passargument
# Output
> npm run echo-packagename -- "hello"
> npm-tips-and-tricks@1.0.0 echo-packagename
> echo $npm_package_name "hello"
npm-tips-and-tricks hello

6. Быстрая навигация между документацией пакетов

Для любого пакета можно очень просто получить документацию

npm docs <пакет>
либо
npm home <пакет>

Так же можно проверить пакет на незакрытые уязвимости

npm bug <пакет>

Открыть в бразуере репозиторий пакета можно так npm repo <пакет>.

7. Удаление дублирующихся пакетов

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

npm dedupe // или npm ddp

8. Сканирование зависимостей на уязвимости

Для сканирования зависимостей приложения на уязвимости можно использовать npm audit. На выходе команда выдает на дисплее и в JSON формате информацию о уязвисимостях в зависимостях.

Команда npm audit fix автоматически устанавливает патчи (если они есть) во всех уязвимых пакетах.

9. Проверка окружения

Команда npm doctor проверяет программное окружения на выданные привелегии, возможность установки зависимостей и валидность зависимостей.

10. Проверка устаревших пакетов

Для проверки устаревших пакетов можно использовать npm outdated --long или npm outdated -l. Также можно проверить наличие последней версии для любого пакета npm, просто выполнив команду

# Показывает информацию о пакете 
npm view <package-name> или npm v <package-name>

# Показывает только последнюю версию 
npm v <package-name> version

# Показывает список всех версий 
npm v <package-name> versions

11. Список установленных пакетов

Для вывода списка установленных пакетом можно использовать npm ls. Команда выводит зависимости в виде дерева. Так же можно использовать флаг --depth для ограничения глубины поиска.

npm ls --depth=1