npm это стандартный менеджер пакетов для Node.js (код, работающий на стороне сервера, бэкэнда).

В сентябре 2022 года было зарегистрировано более 2.1 миллиона пакетов, внесенных в реестр npm, что делает его крупнейшим хранилищем кода на одном языке на Земле, и вы можете быть уверены, что есть пакет для (почти!) всего. Развитие npm начиналось как реализация способа загрузки и управления зависимостями пакетов Node.js, но с тех пор npm стал инструментом, используемым также во фронтэнде JavaScript (код, работающий в браузере).

Замечание: существуют Yarn и pnpm как альтернативы командной строке npm.

[Пакеты npm]

npm устанавливает, обновляет и обслуживает загрузки зависимостей (dependencies) вашего проекта. Зависимости это предварительно собранные куски кода, такие как библиотеки и пакеты, которые нужны для работы вашему Node.js приложению.

Инсталляция всех зависимостей. Если в проекте у вас есть файл package.json, то запустите команду:

$ npm install

Эта команда установит все, что нужно для проекта, в папку node_modules, и создаст её, если она еще не была создана.

Установка единичного пакета. Вы можете также установить отдельный пакет командой:

$ npm install < package-name>

Кроме того, начиная с версии npm 5, эта команда добавляет < package-name> в секцию dependencies файла package.json. До появления версии npm 5 нужно было добавить флаг --save.

Иногда к этой команде добавляют дополнительные флаги:

--save-dev установит и добавит элемент в секцию devDependencies файла package.json.
--no-save установит, но не добавит элемени в секцию dependencies файла package.json.
--save-optional установит и добавит элемент в секцию optionalDependencies файла package.json.
--no-optional предотвратит установку опциональных (не обязательных) зависимостей.

Существуют сокращенные варианты этих флагов:

-S: --save
-D: --save-dev
-O: --save-optional

Различие между секциями devDependencies и dependencies в том, что первая содержит инструменты разработки, наподобие библиотеки тестирования, в то время как последняя встраивается в публикуемое приложение.

Что касается optionalDependencies, разница заключается в том, что сбой сборки зависимости не приведет к сбою установки. Но ваша программа обязана справиться с отсутствием зависимости. См. также описание дополнительных зависимостей package.json.

Обновление пакетов. Обновление выполняется простой командой:

$ npm update

npm проверит все пакеты на наличие более новых версий, которые удовлетворяют ограничениям настроек версий (versioning constraints).

Вы также можете обновить единичный пакет:

$ npm update < package-name>

[Настройка версий (versioning)]

В дополнение к простым загрузкам и установкам пакетов npm также обслуживает versioning, так что вы можете указать определенную версию пакета, или требовать версию выше или ниже, чем указываете. Вы часто можете встретиться с ситуациями, когда какая-то библиотека совместима только с основным релизом (или определенным релизом) другой библиотеки. Или баг в последнем релизе библиотеки, пока он не исправлен, может создавать проблему.

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

Во всех подобных случаях versioning спасает от проблем, и npm следует стандарту семантики semver.

Вы можете установить определенную версию пакета командой:

$ npm install package-name@version

[Запуск задач (скриптов)]

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

$ npm run < task-name>

Например:

{
  "scripts": {
    "start-dev": "node lib/server-development",
    "start": "node lib/server-production"
  }
}

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

$ npm run watch
$ npm run dev
$ npm run prod

[Файл jsconfig.json]

Это конфигурационный файл, помогающий вашему редактору кода и сборщику модуля (bundler, если вы таковой используете). Language Server Protocol (LSP) редактора текста кода (обычно это популярная IDE Visual Studio Code, VScode [2]) просматривает этот файл, чтобы узнать больше о вашем проекте.

Многие сборщики, такие как (Vite, Turbo, etc) также будут использовать jsconfig.json во время разработки и сборки.

Хотя этот файл изначально произошел из Visual Studio Code, любой использующий LSP редактор будет использовать файл jsconfig.json, включая Visual Studio Code, Sublime Text и так далее.

Самые часто используемые настройки это папки include/exclude для intellisense (что почти всегда является функционалом современных редакторов, использующих LSP). Также здесь создаются псевдонимы для определенных папок с вашим исходным кодом. Пример файла jsconfig.json:

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "$libs": ["src/libs"],
      "$libs/*": ["src/libs/*"],
    }
  },
  "include": ["src/**/*.d.ts", "src/**/*.js", "src/**/*.svelte"],
  "exclude": ["node_modules", "**/node_modules", "dist"]
}

В основном этот файл сообщает серверу языка (LSP) следующее:

baseUrl Используется каталог . как корень проекта (project root, это каталог, где находится сам файл jsconfig.json).

paths Указывается, что $libs в вашем исходном коде ссылается на /src/libs. Это полезно, если ваш редактор полагается на LSP для поиска файлов. Когда вы говорите ему перейти к определенному файлу (go to file), то файл будет найден в правильном месте.

include Это означает включение всех папок и файлов, заканчивающихся на эти расширения, в поиск файлов и автодополнение кода.

exclude Означает исключение всего содержимого папок node_modules и dist. Например, вы не хотите, чтобы скомпилированный пакет появлялся в результатах поиска по символам или переменным.

Другими словами, вы можете рассматривать файл jsconfig.json как нечто наподобие .gitignore, но предназначенное только для использования сервером языка LSP. Однако следует иметь в виду, что если вы намерены использовать jsconfig.json для создания алиасов, то будет нужна дополнительная конфигурация для сборщика модуля (module bundler). Также обновите свой конфиг eslint, если используете ESLint.

Например, в среде Node.js/CommonJS вам потребуется указать Node.js, что такое $libs. Существует множество способов сделать это, но в настоящее время чаще всего используется module-alias.

{
  "name": "web-demo",
  "version": "1.0.0",
  "description": "Vue 3 project with Vite",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "lint": "eslint ."
  },
  "dependencies": {
    "vue": "^3.3.0"
  },
  "devDependencies": {
    "vite": "^4.4.0",
    "eslint": "^8.0.0"
  }
}

{
  "name": "web-demo",
  "version": "1.0.0",
  "lockfileVersion": 3,
  "requires": true,
  "packages": {
    "": {
      "name": "web-demo",
      "version": "1.0.0",
      "dependencies": {
        "vue": "^3.3.0"
      }
    },
    "node_modules/vue": {
      "version": "3.3.4", // Точная версия!
      "resolved": "https://registry.npmjs.org/vue/-/vue-3.3.4.tgz",
      "integrity": "sha512-..."
    }
  }
}

[Ссылки]

1. Introduction to npm site:nodejs.org.
2. VSCode FAQ.
3. Введение в Node.js.