GeekBrains
РОСБАНК [CPS] RU
Dfsport
↑↑

↓↓
Флаг России Флаг Англии
🏠 | 💻 IT |

Node Package Manager

Введение

Установка

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

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

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

Проверить версии установленных 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 ` 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" }

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

Установим первый пакет. Начнём с 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 будут установлены с указанными версиями.

Ошибки

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

Например: у нас есть статья про аэропорт Хельсинки и про аэропорт Риги но в выдаче по Риге всё равно статья про Хельсинки.

Если статья Вам помогла, нажимайте ДА. Так мы поймём, что переделывать её не нужно.

Занятно наблюдать в вебвизоре, как люди копируют текст, например вежливого отказа в трудоустройстве на английском но игнорируют кнопку ДА.

Сделаем поиск лучше!

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