12 советов NPM по повышению эффективности кодирования JavaScript

внешний интерфейс JavaScript

Эта статья переведена сBlog.bit SRC.IO/ Годовой рейтинг -Типс- Нажмите ..., плюс понимание бутылки, немного измененное от оригинала

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

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

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

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

npm init -y

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

npm config set init-author-name "Ankit Jain"
npm config set init-author-email "ankitjain28may77@gmail.com"

затем беги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 <ankitjain28may77@gmail.com>",
  "license": "ISC"
}

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

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

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

Интерфейс командной строки NPM также позволяет использовать другие источники, такие какBit,tarballдокумент,GitHub,Bitbucketа такжеgist)УстановитьjavascriptМешок.

# 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

Например: Установить компонент кнопки из Bit

Предположим, мне нужен компонент кнопки, и один из моих товарищей по команде опубликовал компонент кнопки в нашей коллекции компонентов на Bit.

Сначала настройте Bit какscope(пакет объема)

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

Затем я перехожу к набору компонентов моей команды и ищу кнопку:

оказатьсяbuttonкомпоненты, скопируйте команду установки, установите с помощью npm

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

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

Например: установите компонент Icon из корпоративной частной библиотеки npm.

Например, мне нужно установитьIconкомпонент, и один из моих товарищей по команде опубликовал компонент кнопки в частной библиотеке предприятия npm.

Мы также можем использоватьscopeСвязан с частной библиотекой предприятия. Таким образом, вы можете использовать как общедоступные репозитории npm, так и некоторые другие модули из частных репозиториев:

npm config set @xscope:registry https://xxx.com/npm/

Установка из нескольких источников: пользователь не знает

Каждый раз, когда пользователь использует приватную библиотеку, ему необходимо переключить путь к изображению npm, используяnpm preinstallкрючок, предметpackage.jsonувеличить вpreinstallСкрипт для выполнения, чтобы партнеры могли установить вслепую:

// 在执行 npm install 命令前，npm 会自动执行 npm preinstall 钩子
"scripts": {
    "preinstall": "node ./bin/preinstall.js"
}

Настройте ./bin/preinstall.js:

const { exec } = require('child_process');

exec('npm config get registry', function(error, stdout, stderr) {
  if (!stdout.toString().match(/registry\.x\.com/)) {
    exec('  npm config set @xscope:registry https://xxx.com/npm/');
  }
});

3. Свежеустановленные зависимости

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

npm ci

это сnpm installОтличаются следующими способами:

  • он будет основан наpackage-lock.jsonУстановите пакеты зависимостей, которые могут гарантировать, что вся команда разработчиков будет использовать зависимости с одной и той же версией и не тратить время на устранение различных странных проблем, вызванных несогласованными зависимостями.
  • он установитpackage-lock.jsonТочная версия пакета, указанная в файле, без необходимости расчета проблемы удовлетворения зависимостей, что в большинстве случаев может значительно ускорить процесс установки модуля узла.
  • Сначала он удалит существующие в проектеnode_modules, затем новая установка
  • Он не будет писатьpackage.jsonили любая блокировка пакета: установка в основном зависает
  • npm installМожно установить один пакет зависимостей,npm ciВы можете установить весь проект только за один раз, поэтому зависимые пакеты не могут установить один зависимый пакет.

Кроме того, еслиpackage-lock.jsonустаревшее (иpackage.jsonконфликт), тоnpm ciОчень важно сообщать об ошибках, чтобы предотвратить устаревание зависимостей проекта.

Уведомление:если вы используетеnpm ci, не забудьте поставитьpackage-lock.jsonПрисоединяйтесь к репозиторию git.

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 scripts

Скрипты 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
.
.

Мы также можем пройтиprocess.env.npm_package_nameи аналогичные другие переменные в коде для доступа к вышеуказанномуenvПеременная.

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

мы можем определитьpackage.jsonв файлеconfig, чтобы определить свои собственные переменные какnpm_package_config_Переменные среды npm с префиксом, как показано ниже:

"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
> npm-tips-and-tricks@1.0.0 echo-hello 
> echo "Hello"
Hello
> npm-tips-and-tricks@1.0.0 echo-helloworld
> echo "Helloworld"
Helloworld

мы также можем использовать＆Запускайте несколько скриптов параллельно.

npm run echo-both-in-parallel
# Output
> npm run echo-hello & npm run echo-helloworld
> npm-tips-and-tricks@1.0.0 echo-hello
> echo "Hello"
> npm-tips-and-tricks@1.0.0 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"
> npm-tips-and-tricks@1.0.0 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 достаточные разрешения для установки пакетов javascript и может ли он подключаться к реестру npm. Он также проверяет версии узлов и npm, проверяет кеши на наличие битых пакетов.

npm doctor

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

нпм предоставляетnpm linkкоманды, чтобы мы могли работать и тестировать пакет итеративно. npm link создаст символическую ссылку на наш тестовый пакет в глобальной папке модулей 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 listКоманда, мы можем перечислить все пакеты npm, установленные в проекте. Это создаст древовидную структуру, показывающую установленные пакеты и их зависимости.

npm list or npm ls

мы можем использовать—depthфлаг для ограничения глубины поиска:

npm ls --depth=1

Суммировать

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

Спасибо за прочтение

Добро пожаловать, чтобы обратить внимание на «Front-end Bottle Master», ответьте на «Exchange», чтобы присоединиться к группе внешнего обмена!

Добро пожаловать, чтобы обратить внимание на «Front-end Bottle Master», ответьте «Алгоритм», чтобы автоматически присоединиться и построить полную структуру данных и систему алгоритмов от 0 до 1!

Здесь мистер Боттл не только представляет алгоритм, но и объединяет алгоритм с различными полями интерфейса, включая браузеры, HTTP, V8, React, исходный код Vue и т. д.

Здесь (группа алгоритмов) вы можете изучать большой вопрос по программированию заводского алгоритма (Ali, Tencent, Baidu, Byte и т. д.) или литкод каждый день, а мистер Бутылка ответит на него на следующий день!

Кроме того, каждую неделю есть рукописные вопросы по исходному коду, и мистер Боттл тоже на них ответит!

Категории