Советы и приемы NPM

12 полезных советов и приемов NPM для более продуктивного программирования на JavaScript.

NPM, диспетчер пакетов узлов, представляет собой диспетчер пакетов для языка программирования JavaScript. Любой разработчик, работающий с Javascript, использовал этот замечательный инструмент CLI для установки зависимостей для своего проекта.

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

1. Инициализируйте свой пакет.

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

npm init -y

Мы также можем установить конфигурацию инициализации по умолчанию, такую ​​как данные об авторе и т. Д. Давайте настроим с помощью команды npm config.

npm config set init-author-name "Ankit Jain"
npm config set init-author-email "[email protected]"

Давайте запустим npm init -y, чтобы автоматически сгенерировать наш пакет -

{
  "name": "<name of the root dir>",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "Ankit Jain <[email protected]>",
  "license": "ISC"
}

Мы также можем расширить функциональность npm init, добавив наш собственный файл javascript и снова настроив его, используя npm config -

npm config set init-module <path-of-the-custom-file>

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

NPM CLI также позволяет устанавливать пакеты javascript из других источников, таких как Bit, tarball-файл, репозиторий GitHub, Bitbucket и gist.

# Install a component from Bit (set Bit as a scoped registry)
npm config set @bit:registry https://node.bit.dev
npm i @bit/username.collection.component
# Install from tarball stored locally
npm i ./local-tarball-package.tgz

# Install tarball package from internet
npm i https://abc/xyz/package.tar.gz

# Install from github repo
npm i githubuser/reponame

# Install from bitbucket repo
npm i bitbucket:bitbucketuser/reponame

# Install from gist
npm i gist:gistID

Пример: установить компонент Button из Bit

Допустим, я ищу компонент Button, который один из моих товарищей по команде опубликовал в нашей коллекции компонентов на Bit.

Я начну с настройки Bit в качестве реестра с ограниченным объемом:

npm config set @bit:registry https://node.bit.dev

Затем я перейду в коллекцию моей команды и найду кнопку:

Я перейду на страницу компонента «Кнопка» и скопирую команду для установки с помощью NPM:

npm i @bit/the_a-team.imperfect-components.button

Название моей команды: «Команда А». Название нашей коллекции: «Несовершенные компоненты».

3. Чистая установка зависимостей вашего пакета.

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

npm ci

Он отличается от установки npm следующим образом:

• Он устанавливает точную версию пакета, указанную в файле package-lock.json.
• Удаляет существующие node_modules и запускает новую установку.
• Он не будет записывать в package.json или файл блокировки.
• Он не устанавливает отдельные пакеты, подобные npm install.

4. Используйте ярлыки для установки пакетов.

Это самая полезная функция, которую мы можем использовать для экономии времени при установке пакетов -

# Install package
npm install <package_name>
Shortcut: npm i <package_name>
# Install devDependencies
npm install --save-dev <package_name>
Shortcut: npm i -D <package_name>
# Install dependencies (This is default)
npm install --save-prod <package_name>
Shortcut: npm i -P <package_name>
# Install packages globally
npm install --global <package_name>
Shortcut: npm i -g <package_name>

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

npm i express cheerio axios

Установите несколько пакетов с одинаковым префиксом -

npm i eslint-{plugin-import,plugin-react,loader} express

5. Скрипты NPM

Скрипты NPM - самая полезная функция. Он поддерживает настраиваемые сценарии, кроме предопределенных предварительных / пост-хуков (обычно называемых сценариями жизненного цикла), например:

• preinstall - который запускается перед установкой любого пакета.

npm run env перечисляет все переменные среды npm, присутствующие в нашем пакете. Он также содержит свойства пакета с префиксом 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                # Package properties
npm_package_author_name=Ankit Jain
npm_package_name=npm-tips-and-tricks   # Name of our package
.
.

Мы также можем получить доступ к указанным выше переменным env в нашем коде с помощью process.env.npm_package_name и аналогичных других переменных.

Настроить собственные переменные в package.json

Мы можем передать наши собственные переменные как переменные среды npm с префиксом npm_package_config_, определив их в файле package.json в объекте config. Давайте определим переменную myvariable в нашем файле package.json.

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

Теперь давайте проверим это в переменной env -

npm run env | grep npm_package_config_

Мы можем увидеть что-то вроде этого -

npm_package_config_myvariable=Hello World

Определите наши собственные сценарии

Команда 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"
},

Теперь мы можем увидеть все команды, добавленные выше, выполнив эту команду -

npm run

Выход будет -

# 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 -

npm run echo-hello
# Output
> echo "Hello"
Hello

Запуск нескольких сценариев в одном сценарии npm -

Мы можем запускать несколько скриптов, используя «&&». Оба сценария запускаются последовательно, то есть один за другим.

npm run echo-both
# Output
> npm run echo-hello && npm run echo-helloworld
> [email protected] echo-hello 
> echo "Hello"
Hello
> [email protected] echo-helloworld
> echo "Helloworld"
Helloworld

Мы также можем запускать несколько скриптов параллельно, используя «&».

npm run echo-both-in-parallel
# Output
> npm run echo-hello & npm run echo-helloworld
> [email protected] echo-hello
> echo "Hello"
> [email protected] echo-helloworld
> echo "Helloworld"
Hello
Helloworld

Используйте переменную среды npm в сценарии npm -

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

Передача аргументов в другой сценарий npm -

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

npm run echo-passargument
# Output
> npm run echo-packagename -- "hello"
> [email protected] echo-packagename
> echo $npm_package_name "hello"
npm-tips-and-tricks hello

Используйте канал для передачи данных из одного сценария npm в другой -

npm run echo-pipedata
# Output
> cat ./package.json | jq .name > package-name.txt
# Let's cat package-name.txt
cat package-name.txt
# Output
"npm-tips-and-tricks"

6. Быстро переходите к документации пакета.

Мы можем быстро перейти к документации любого пакета npm, просто выполнив эту команду -

npm docs <package-name>
OR
npm home <package-name>

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

npm bug <package-name>

Аналогичным образом npm repo <package-name> открывает в браузере страницу репозитория GitHub.

7. Удаляет повторяющиеся пакеты.

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

npm dedupe or npm ddp

8. Просканируйте свое приложение на наличие уязвимостей.

мы можем запустить команду npm audit, чтобы просканировать наш проект на наличие уязвимостей в любой зависимости. Он прекрасно генерирует вывод в формате таблицы (мы также можем получить вывод в JSON), а также отображать, при этом другие пакеты зависят от этого пакета, если это многоуровневая / многозависимая зависимость.

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

npm audit fix

9. Проверьте нашу среду

Мы можем использовать команду npm doctor для выполнения нескольких проверок в нашей среде, например, имеет ли наш npm CLI достаточные разрешения для установки пакетов javascript и может ли он подключаться к реестру npm. Он также проверяет версии node и npm, проверяет кеш на наличие поврежденных пакетов.

npm doctor

10. Протестируйте свои пакеты локально.

NPM предоставляет команду npm link, чтобы мы могли работать и тестировать наш пакет итеративно. Ссылка NPM создает символическую ссылку на наши тестовые пакеты в глобальной папке модулей npm, и мы можем установить этот пакет в наше тестовое приложение, просто запустив npm link <package_name>, который создаст символическую ссылку из глобально установленного пакета в наш корневой каталог node_modules. Это очень полезно при тестировании наших локальных пакетов или использовании наших собственных локальных пакетов npm.

cd /test-package (package name is helloworld)
npm link                     # Global symlink created
cd /application
npm link helloworld         # Create symlink in node_modules 

11. Проверьте устаревшие пакеты.

Мы можем использовать команду npm outdated, чтобы проверить все устаревшие пакеты npm. Он также показывает последнюю версию, которая должна быть установлена ​​для любого устаревшего пакета.

npm outdated --long or npm outdated -l

Мы также можем проверить наличие последней версии для любого пакета npm, просто выполнив эту команду -

# Shows the package information
npm view <package-name> or npm v <package-name>
# Shows the latest version only
npm v <package-name> version
# Shows the list of all versions
npm v <package-name> versions

12. Вывести список всех установленных пакетов.

Мы можем вывести список всех пакетов npm, установленных в нашем проекте, просто выполнив команду npm list. Он создаст древовидную структуру, показывающую установленный пакет и его зависимости.

npm list or npm ls 

Мы можем использовать флаг --depth, чтобы ограничить глубину поиска

npm ls --depth=1

Заключение

В этой статье мы узнали о некоторых полезных советах и ​​приемах NPM, которые можно использовать для повышения производительности. Таких хитростей / советов может быть еще много. Я тоже хотел бы услышать о них в разделе комментариев. Это может помочь другим разработчикам.

Не стесняйтесь комментировать и спрашивать меня о чем угодно. Вы можете подписаться на меня в Twitter и Medium. Спасибо за прочтение! 👍

Учить больше