Установка пакетов

Пакет можно добавить в репозиторий и любой пользователь сможет его установить с помощью программы NPM. Установка выполняется командой npm install (или npm i) тремя основными способами:

• глобально — для этого в составе команды следует указать флаг -g или --global. Давайте установим глобально CSS-препроцессор Sass:

npm install -g sass

В этой команде npm является названием запускаемой программы. Флаг install означает, что мы хотим установить пакет, название которого указано в самом конце команды. Мы устанавливаем пакет с названием sass. Флаг -g означает, что пакет должен быть доступен для всех проектов, т. е. он должен быть установлен глобально.

Если установка прошла успешно, то файлы программы Sass можно найти в каталогах C:\Users\<Имя пользователя>\AppData\Roaming\npm и C:\Users\<Имя пользователя>\AppData\Roaming\npm\node_modules\sass. Первый каталог добавлен в переменную окружения PATH, поэтому мы можем в командной строке указывать только название программы без добавления пути к ней. Давайте выведем версию Sass:

C:\book>sass --version
1.26.10 compiled with dart2js 2.8.4

• как зависимость пакета на этапе выполнения — для этого в составе команды следует указать флаг --save-prod или флаг -P или вообще не добавлять никакие флаги. Давайте установим библиотеки Bootstrap и jQuery:

C:\book\p1>npm install bootstrap --save-prod
C:\book\p1>npm install jquery

Если установка прошла успешно, то библиотеки будут загружены в каталог C:\book\p1\node_modules. При этом в файл package.json автоматически добавляется свойство dependencies с установленными пакетами и их версиями:

"dependencies": {
  "bootstrap": "^4.5.2",
  "jquery": "^3.5.1"
}

• как зависимость пакета на этапе разработки — для этого в составе команды следует указать флаг --save-dev или флаг -D. Давайте установим node-sass:

npm install node-sass --save-dev

После установки в каталоге C:\book\p1\node_modules будет создан каталог node-sass с файлами, необходимыми для компиляции. Дополнительно были установлены все зависимости, а в файл package.json добавлено свойство devDependencies, благодаря флагу --save-dev:

"devDependencies": {
  "node-sass": "^4.14.1"
}

В каталоге пакета C:\book\p1 автоматически создается файл package-lock.json, в котором описываются все установленные пакеты, включая зависимости. Не следует изменять этот файл вручную.

Вывести список всех установленных пакетов позволяет следующая команда:

C:\book\p1>npm list

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

C:\book\p1>npm list --depth 0

Флаг --depth просто сворачивает все вложенные зависимости. Для вывода списка всех пакетов, установленных глобально, следует указать флаг -g:

C:\book\p1>npm list -g

Получение списка глобальных пакетов только верхнего уровня:

C:\book\p1>npm list -g --depth 0

За один раз можно установить сразу несколько пакетов, перечислив их через пробел. Установим пакеты webpack, css-loader и sass-loader:

npm install webpack css-loader sass-loader --save-dev

Значение свойства devDependencies стало таким:

"devDependencies": {
  "css-loader": "^4.3.0",
  "node-sass": "^4.14.1",
  "sass-loader": "^10.0.2",
  "webpack": "^4.44.2"
}

Обратите внимание на количество каталогов внутри каталога C:\book\p1\node_modules. Мы установили всего четыре пакета, а они подтянули в качестве зависимости еще около 400 пакетов. Не зря каталог node_modules называют "черной дырой". Иногда общий объем установленных зависимостей достигает гигабайта!

Вы наверняка обратили внимание на то, что перед версией пакета добавлен символ ^. Он означает, что может быть установлен пакет указанной версии или выше, при условии, что изменяются только вторые или третьи числа в версии. Т. е. при сохранении совместимости версий. Вместо символа ^ можно указать символ ~, который позволяет изменять только третье число в версии.

Для установки конкретной версии ее нужно указать после символа @:

npm install <Пакет>@<Версия>

Установим библиотеку Popper.js, используемую библиотекой Bootstrap для позиционирования всплывающих элементов, например, подсказок и меню. Как нам узнать требуемую версию? Правильно! Открыть файл package.json, расположенный в каталоге C:\book\p1\node_modules\bootstrap, и посмотреть раздел с зависимостями:

"popper.js": "^1.16.1"

Итак, теперь мы знаем, что нужна версия 1.16.1 и можем ее установить:

npm install popper.js@1.16.1

Проверяем установку и видим, что в свойстве dependencies добавлена строка с библиотекой Popper.js той версии, что нам и нужна:

"dependencies": {
  "bootstrap": "^4.5.2",
  "jquery": "^3.5.1",
  "popper.js": "^1.16.1"
}

Благодаря свойствам dependencies (этап работы) и devDependencies (этап разработки) все пользователи нашего пакета знают о зависимостях и версиях необходимых сторонних пакетов. В отличие от глобальной установки, где о зависимостях знаем только мы. Можно полностью удалить каталог node_modules и команда npm install (без указания названия пакета) полностью восстановит его содержимое на основе файла package.json.

Вместо версии можно указать теги, например, latest для установки последней версии или next для установки различных ночных сборок пакетов. Например, установим ночную сборку компилятора языка TypeScript на глобальном уровне:

C:\book\p1>npm install -g typescript@next

Выведем версию компилятора в окне консоли:

C:\book\p1>tsc -v
Version 4.1.0-dev.20200930

Получить список всех, доступных для загрузки, версий пакета typescript позволяет следующая команда:

C:\book\p1>npm view typescript versions

Учебник по JavaScript (Node.js) в формате PDF