Пакетный менеджер npm. Введение в пакетный менеджер NPM для начинающих. Связи любых пакетов локально

В этом руководстве я расскажу: как установить вебпак (webpack), его зависимости и настроить объединение и минимизацию скриптов через него.
Это первая часть серии "Webpack в NetBeans проекте".

1. Зачем всё это нужно:

1. Уже несколько раз в проектах мне понадобилось из нескольких скриптов объединять в один. Причина такого разделения - каждый скрипт выполняет свою задачу, а для уменьшения http-запросов при релизе плагина (или дополнения к WordPress плагину WP-Recall) - нужно все объединить в один. Руками это делать не хочется.

2. Я люблю комментировать js (не то чтобы маниакально, но в помощь себе - когда вернусь к нему через длительное время), а комментарии в js - это не каменты в php - в скрипте они ложатся мертвым грузом в файле и увеличивают его размер. А этот файл грузится во фронте.

3. Кто-то не хочет чтобы js был прочитан человеком. Ну мало ли... На помощь приходит "Обфуска́ция" (от лат. obfuscare - затенять, затемнять; и англ. obfuscate - делать неочевидным, запутанным, сбивать с толку) - приведение исходного текста или исполняемого кода программы к виду, сохраняющему её функциональность, но затрудняющему анализ, понимание алгоритмов работы и модификацию при декомпиляции.

Идеальное решение:

Пишешь скрипты в разных файлах;
Комментируешь их "от души";
Не скупишься на названия переменным (они должны быть говорящими).

При релизе:

Объединяешь автоматически указанные файлы в один;
Автоматически происходит минимизация (удаление пробелов, переносов и комментариев) - скрипт идет в одну строку;
Автоматически файл обфусцируется - имена переменных сокращаются.

Всё это ведет к снижению веса файла. Что в итоге сказывается на более быстрой загрузке файла.

Посмотрите на пример (все скрины кликабельны):
Результат веса файла ~2 раза

Ну и время "расти дальше" настало. Выбор пал на webpack. Но для того чтобы его поставить придется установить терминал Cygwin в NetBeans (далее: нетбинс, ide), поставить node.js с npm (node package manager) внутри, а затем только поставить сам вебпак.
На этом приключение не закончится - в процессе запуска команды $ npm run build придется доставить webpack-command и webpack-cli - т.к. в терминале вылезет сообщение что их нет. Двинуться без этих пакетов дальше будет нельзя.

2. Глобальные установки и настройки:

В жизни никогда через терминал и командную строку не работал. Всё на кнопочки тыкал. Но тут так не прокатит.

2.1. Ставим Cygwin терминал:

В ide NetBeans есть возможность работы через терминал.
Открываем любой свой проект и вот здесь он находится:
"Сервис" -> "Открыть в терминале"

Откроем терминал

При открытии терминала, ide попросит вас установить его. Вы увидите сообщение вроде этого:

установите Cygwin и перезапустите ide

Cygwin - набор утилит для работы windows через unix команды. Пакет также содержит и терминал.

На эту тему мне интересно решить еще пару-тройку вопросов:
Минимизация и объединение css через webpack;
Автопрефиксы на основе caniuse сервиса;
И конечно же компиляция jsx через babel.

Все конечно же через нетбинс. Поэтому этот урок будем считать первым из серии.

p.s. если вы заметили неточность или опечатку, у вас появились вопросы или вы хотите высказаться по текущей статье - добро пожаловать в комментарии.

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

Современная разработка очень тесно связана с использованием Node JS. В свою очередь Node JS используется как оболочка для работы с NPM и его пакетами (всем известная папка node_modules).

В данной статье я постараюсь перечислить все самые популярные команды для NPM: установка, обновление, удаление пакетов и др.

Инструкции по NPM

И всё таки думаю что стоит для начала упомянуть пару важных консольных команд для Node JS.

Как посмотреть список всех команд Node.js

Чтобы посмотреть список всех команд доступных в Node.js, для этого нужно ввести в консоли команду:

Как узнать версию установленного Node.js

Для этого есть команда node --version или короткий вариант команды этой же команды node -v . Так как краткость - сестра таланта, я пользуюсь командой:

Команды для NPM и работы с пакетами, модулями

Если расписывать команды NPM-а, то так же начнём с того как в консоли вывести все доступные команды нпма.

Cписок всех доступных команд пакетного менеджера (npm) выведится если в консоли ввести команду npm help или сокращённый вариант npm -h:

Команда npm -h вывалит в консоли такой список доступных команд:

access, adduser, audit, bin, bugs, c, cache, ci, cit, completion, config, create, ddp, dedupe, deprecate, dist-tag, docs, doctor, edit, explore, get, help, help-search, hook, i, init, install, install-test, it, link, list, ln, login, logout, ls, outdated, owner, pack, ping, prefix, profile, prune, publish, rb, rebuild, repo, restart, root, run, run-script, s, se, search, set, shrinkwrap, star, stars, start, stop, t, team, test, token, tst, un, uninstall, unpublish, unstar, up, update, v, version, view, whoami

Чтобы посмотреть инструкции для какой то из этих команд, для этого нужно ввести в консоли команду npm help COMANDA , где COMANDA - это название команды из списка.

Например посмотреть инструкции для обновления:

Npm help update

В установленном по умолчанию браузере откроется страница с инструкциями по данной команде. Инструкции находятся локально и не требуют подключения к интернету.

Как узнать версию NPM

Чтобы узнать установленную версию npm, нужно ввести в терминале команду npm --version или сокращённый вариан данной команды npm -v:

Как обновить NPM

В отличии от Node.js, NPM знает как обновить себя! Чтобы обновить свой NPM до последней версии, вводим в терминале такую команду:

Npm install npm@latest -g

Npm update npm -g

Инициализация пакетов NPM

Инициализация пакетов - это процесс быстрой установки пакетов NPM-а, которые прописаны в файле package.json

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

Npm init

Работа с NPM-пакетами

Установить пакеты из файла package.json:

Npm install

npm скачает и установит все пакеты указанные в файле package.json

Посмотреть список установленных пакетов:

Npm list --depth=0

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

Npm outdated --depth=0

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

Npm outdated --depth=0 -g

Команда npm install package - позволяет установить любой пакет по его имени. Если при этом к команде добавить префикс -g пакет будет установлен глобально на весь компьютер.

Npm install PACKAGE

Npm install PACKAGE --save-dev

Глобальная установка пакета:

Npm install PACKAGE -g

Удалить пакет:

Удалить глобально установленный пакет:

Обновить пакеты:

И в заключение, если вы пользуетесь конролем версий Git, то незабудьте добавить в файл .gitignore исключение для папки node_modules , чтобы гит не индексировал файлы из этой папки. Для этого создайте файл .gitignore если он у вас ещё не создан и пропишите в нём отдельной строкой:

Node_modules/

Обновление пакетов NPM при изменении мажорной версии

Если у пакета NPM сменилась версия на мажорную, то есть была изменена первая цифра в версии пакета (например установлена версия пакета 4.19.1, а последняя версия 5.3.0), то она не обновится командой npm up . Это сделано в целях безопасности.

Для обновления мажорной версии есть такая команда:

Npm i -g npm-check-updates && ncu -a && npm i

В итоге будут обновлены все пакеты.

Делайте такое обновление только в случае если вы уверены и понимаете что делаете. Мажорная версия несёт изменения для которых есть изменения в настройках.

Посмотрите это видео, где есть понятное объяснение по версиям пакетов NPM:

• Перевод

npm - это пакетный менеджер node.js . С его помощью можно управлять модулями и зависимостями.
Небольшая шпаргалка всех моих любимых команд npm:

Установка npm

Обновление npm

Поиск пакетов в npm

Просмотр информации о пакете

Локальная установка пакетов

Установка пакета в наше приложение

test.js

Понимание разницы между глобальной и локальной установкой

test.js