NPM

Содержание
Введение
Установка
Узнать версию NPM и NPX
Начало работы
Установка пакетов
Установка определённой версии пакета
Узнать версии установленных пакетов
Ошибки
Похожие статьи

Введение

Менеджер пакетов, входящий в состав Node.js.

Установка пакета производится при помощи команды:

npm install <packagename>

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

npm search

Этой же командой можно производить выборочный поиск пакетов.

Установка

Входит в состав Nodejs поэтому обычно не требует отдельной установки.

Об установке Nodejs читайте в статье установка Nodejs

Если по какой-то причине в вашей системе npm не установился с Nodejs (у меня такое было в Ubuntu ) - выполните

sudo apt install npm

Узнать версию

Проверить версии установленных Nodejs, npm и npx можно следующими командами

$ node --version

v10.16.3

$ npm --version

6.9.0

$ npx --version

6.9.0

Начало работы

Логично начать с создания директории для нового проекта.

Я буду работать над сайтом HeiHei.ru поэтому назову папку heihei

mkdir heihei

Перейдём в созданную директорию

cd heihei

Убедимся, что в новой папке пусто

ls

Теперь выполним важнейшую для будущей разработки команду

$ npm init

This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help json` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (my-project)

npm предложит заполнить информацию о проекте. Появятся следующие поля:

name: (heihei)
version: (1.0.0)
description:
entry point: (index.js)
test command:
git repository:
keywords:
author:
license: (ISC)

Можно заполнить все поля, но для простоты пока просто нажмем несколько раз подряд Enter

Если предварительно привязать директорию к удалённому репозиторию GIT то npm при инициализации это увидит и сам заполнит пункт git repository.

Возможно, это и есть самый простой и правильный путь, если Вы планируете работать дальше с GIT.

В конце должно появиться подобное сообщение. Нажимаем Enter ещё раз.

About to write to C:\Users\ao\Desktop\Sites\heihei\package.json:

{
"name": "heihei",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC"
}


Is this OK? (yes)

РЕКЛАМА от Яндекса. Может быть недоступна в вашем регионе

Конец рекламы. Если там пусто считайте это рекламой моей телеги

Проверим, что появилось в нашей папке после инициализации

ls

package.json

package.json это файл, который будет хранить в себе список установленных пакетов и их версии.

Сразу после инициализации он содержит только информацию о проекте

{ "name": "heihei", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC" }

В мире Python похожие задачи решают venv и freeze

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

Установим первый пакет. Начнём с jquery.

npm install jquery

npm notice created a lockfile as package-lock.json. You should commit this file.
npm WARN heihei@1.0.0 No description
npm WARN heihei@1.0.0 No repository field.

+ jquery@3.4.1
added 1 package from 1 contributor and audited 1 package in 1.227s
found 0 vulnerabilities

В версиях NPM ниже 5.0.0 при установке пакетов не происходило автоматической записи в файл package.json

Для того, чтобы обновить package.json нужно было устанавливать с опцией --save

Например:

npm isntall jquery --save

В новых версиях это происходит автоматически, но --save ещё используется для того, чтобы задать как именно установить пакет.

Популярный вариант это --save-dev который позволяет сделать установку, скажем так для «разработки и тестирования»

Пример такой установки я разбираю в статье Gulp

Подробнее можно прочитать здесь, docs.npmjs.com/cli/install

Если Вам нужно установить не последнюю версию jquery а архивную используйте @номер_версии. Например:

npm install jquery@3.3.1

Проверим, что появилось в нашей папке после установки первого пакета

ls

node_modules/ package.json package-lock.json

Файл package-lock.json появиля в пятой версии NPM как дополнительное средство контроля совместимости.

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

Подробнее про это можно прочитать здесь, здесь, здесь

Про контроль версий можно прочитать на сайте semver.org

Посмотрим содержимое файла package-lock.json

{ "name": "heihei", "version": "1.0.0", "lockfileVersion": 1, "requires": true, "dependencies": { "jquery": { "version": "3.4.1", "resolved": "https://registry.npmjs.org/jquery/-/jquery-3.4.1.tgz", "integrity": "sha512-36+XXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXXXX XXXXXXXXXXXXGoB d+tHdrBMiyjGQs0 Hxs/MLZTu/eHNJJuWPw==" } } }

Посмотрим, что лежит в папке node_modules. После установки jquery логичным будет, увидеть там папку jquery

$ ls node_modules/

jquery/

В данном случае всё очевидно, но огромное количество пакетов создадут не одну папку а сразу несколько.

Старые версии npm создавали всегда одну папку и размещали все зависимости туда.

Новые версии npm сохраняют зависимости в node_modules.

Посмотрим, что лежит в папке node_modules/jquery.

$ ls node_modules/jquery/

AUTHORS.txt bower.json dist/ external/ LICENSE.txt package.json README.md src/

Как Вы можете видеть у jquery есть свой собственный файл package.json на данном этапе он гораздо содержательней нашего корневого package.json но это не надолго.

Установка определённой версии пакета

Установим ещё один пакет и поговорим о его возможных версиях

$ npm install normalize.css

Если package.json не содержит записи о normalize.css то будет установлена последняя стабильная версия.

Если в package.json указана версия, будет установлена она.

Если Вы хотите установить какую-то определённую версию, укажите её в package.json либо введите @номер_версии при установке.

Например:

npm install normalize.css@8.0.1

npm WARN heihei@1.0.0 No description
npm WARN heihei@1.0.0 No repository field.

+ normalize.css@8.0.1
added 1 package and audited 2 packages in 0.523s
found 0 vulnerabilities

Посмотрим содержимое файла package.json и заодно узнаем какие версии пакетов установлены

$ vi package.json

{ "name": "heihei", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "jquery": "^3.4.1", "normalize.css": "^8.0.1" } }

Пакетов npm очень много. Чтобы изучить их все - зарегистрируйтесь на сайте www.npmjs.com

Удобство файла package.json заключается в том, что если Вы хотите скопировать Ваш проект - достаточно перенести файл package.json и выполнить команду npm init.

Все пакеты, перечисленные в package.json будут установлены с указанными версиями.

Ошибки

Пока что этот раздел пуст

Похожие статьи
JavaScript
NodeJS
NPM
Gulp
Playwright

РЕКЛАМА хостинга Beget, которым я пользуюсь более десяти лет

Изображение баннера

Конец рекламы хостинга Beget, который я всем рекомендую.

Поиск по сайту

Подпишитесь на Telegram канал @aofeed чтобы следить за выходом новых статей и обновлением старых

Перейти на канал

@aofeed

Задать вопрос в Телеграм-группе

@aofeedchat

Контакты и сотрудничество:
Рекомендую наш хостинг beget.ru
Пишите на info@urn.su если Вы:
1. Хотите написать статью для нашего сайта или перевести статью на свой родной язык.
2. Хотите разместить на сайте рекламу, подходящую по тематике.
3. Реклама на моём сайте имеет максимальный уровень цензуры. Если Вы увидели рекламный блок недопустимый для просмотра детьми школьного возраста, вызывающий шок или вводящий в заблуждение - пожалуйста свяжитесь с нами по электронной почте
4. Нашли на сайте ошибку, неточности, баг и т.д. ... .......
5. Статьи можно расшарить в соцсетях, нажав на иконку сети: