Введение в пакетный менеджер NPM для начинающих. Введение в пакетный менеджер NPM для начинающих Инструкции по NPM

n pm. это менеджер пакетов JavaScript, который может быть использован для установки, совместного использования и распространения кода, а также для управления зависимостями в ваших проектах. Он полностью написан на JavaScript, как вдохновение от других подобных проектов, как PEAR для PHP или CPAN для Perl. На этом уроке мы покажем вам, как установить npm на Ubuntu 16.04 в качестве операционной системы.

Самое первое, что вам нужно сделать, это и обновить программное обеспечение системы до последней доступной версии. Вы можете сделать это с помощью следующей команды:

Sudo apt-get update && sudo apt-get -y upgrade

Процесс обновления может занять от нескольких секунд до нескольких минут в зависимости от программного обеспечения, которое должно быть обновлено. После того, как ваша система находится в актуальном состоянии, вы можете продолжить.

npm поставляется в комплекте с Node.js, поэтому установить NPM вам нужно только если установили Node.js на вашем . Чтобы установить Node.js 4.x LTS на Ubuntu 16.04 , выполните следующие команды:

Curl -sL https://deb.nodesource.com/setup_4.x | sudo -E bash - sudo apt-get install -y nodejs

В качестве альтернативы, для установки Node.js 6.x на Ubuntu 16.04 , которая является текущей версии Node.js, выполните следующие команды:

Curl -sL https://deb.nodesource.com/setup_6.x | sudo -E bash - sudo apt-get install -y nodejs

Чтобы убедиться, что установка прошла успешно, вы можете проверить версию npm:

Выход должен быть аналогичен приведенному ниже:

# npm -v 2.15.9

Хороший способ начать использовать npm, чтобы прочитать справочную страницу npm или документацию npm. Чтобы проверить страницу npm справки, введите следующую команду:

Npm help

Вот страница npm help:

# npm help Usage: npm where is one of: access, add-user, adduser, apihelp, author, bin, bugs, c, cache, completion, config, ddp, dedupe, deprecate, dist-tag, dist-tags, docs, edit, explore, faq, find, find-dupes, get, help, help-search, home, i, info, init, install, issues, la, link, list, ll, ln, login, logout, ls, outdated, owner, pack, ping, prefix, prune, publish, r, rb, rebuild, remove, repo, restart, rm, root, run-script, s, se, search, set, show, shrinkwrap, star, stars, start, stop, t, tag, team, test, tst, un, uninstall, unlink, unpublish, unstar, up, update, upgrade, v, version, view, whoami npm -h quick help on npm -l display full usage info npm faq commonly asked questions npm help search for help on npm help npm involved overview Specify configs in the ini-formatted file: /root/.npmrc or on the command line via: npm --key value Config info can be viewed via: npm help config [email protected] /usr/lib/node_modules/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 вы будете настраивать тесную работу.

JavaScript все крепче и крепче закрепляет себя на позиции языка go-to типа для веб-разработчиков. Front-end разработчики используют JavaScript для того, чтобы добавить интерактивности пользователям, а так же напрямую общаться с back-end сервисами посредством AJAX.

JavaScript предоставляет огромное количество возможностей. Вы можете спокойно улучшать ваши навыки и при этом не волноваться, что не сможете разрабатывать полноценные веб-приложения. Ключевым компонентом Node.js является революция Сhrome версии V8 JavaScript, которая позволяет использовать JavaScript даже на серверной части.

Node.js так же может быть использован для написания desktop приложений, а так же для разработки инструментов, которые делают процесс разработки веб-приложений еще быстрее. Например, с помощью Node.js вы можете превратить CoffeeScript в JavaScript или SASS в CSS, а так же многое другое.

NPM помогает устанавливать удобным образом разные модули для Node.js.

Предисловие

Node — не является обычной desktop программой. Он не установится как Word или Photoshop и у вас не появится ярлыка на рабочем столе. Им можно воспользоваться только с помощью консольные инструкций (с которыми вы хотя бы чуть-чуть должны быть знакомы). В первое время вам будет казаться, что это не удобно, но в скором времени вы привыкните и все встанет на свои места.

Описание установки

Установка Node.js и NPM очень простая. Все что вам нужно сделать — это зайти на официальный сайт разработчика, скачать файл и установить его на своем компьютере.

Этапы установки

Тестируем

Для того, чтобы убедиться что все было правильно установлено следуйте три простых этапа ниже.

Тестируем Node.js. Откройте Windows консоль и введите node -v .

Тестируем NPM. Откройте Windows консоль и введите npm -v .

Создайте файл. Создайте любой файл, я назову его hello.js и введите console.log("Node.js is installed"); , после чего с помощью node команды, я вызову файл hello.js: node hello.js — это должно вам вывести «Node.js is installed.».

Как обновить Node.js?

Чтобы его обновить, вам нужно снова скачать установщик и повторить весь процесс с самого начала.

JavaScript является неотъемлемой частью веб-разработки. Front-end разработчики используют JavaScript для усовершенствования пользовательского интерфейса, добавление интерактивности, AJAX передачи данных и т.д..

На самом деле при достаточных знаниях JavaScript вы сможете работать с "полным стеком" веб-приложений. Ключ к этому - Node.js, который делает возможность запускать JavaScript на стороне сервера.

Node.js также используется в разработке приложений для настольных компьютеров и средств деплоя (развертывания) приложений, которые делают веб-приложение проще. Например, установив Node.js на свой компьютер, вы сможете быстро конвертировать CoffeeScript в JavaScript, SASS в CSS, а также уменьшить размер вашего HTML, JavaScript и графических файлов.

Кроме установленного Node.js вам также понадобится NPM, который предназначен для установки и управления модулями Node.js. С NPM вы сможете намного проще добавлять много новых и полезных инструментов в ваш проект.

Как работать с Node.js

Node.js не является программой, которую вы просто запускаете нажав по иконке, вы не найдете его на панели задач или в списке приложений. Для использования Node.js вам необходимо выполнять команды (инструкции) в консоле (командной строке), так что будьте готовы к этому.

Установка Node.js

Установка Node.js и NPM довольно проста, все делается с помощью установочного пакета, который можно загрузить с веб-сайта Node.js: .

1. Загрузите установщик для Windows с официального сайта

2. Запустите программу установки

3. Следуйте инструкциям в программе установки

4. Перезагрузите компьютер для корректной работы Node.js

Проверяем корректность установки Node.js и NPM

Для того чтобы убедиться, что все успешно установлено, необходимо выполнить простые команды.

Проверяем Node.js

Для проверки Node.js необходимо открыть командную строку (консоль (Win + R и введите cmd)) и выполнить команду:

Команда вернет текущую версию node.js

Проверяем NPM

Для того, чтобы проверить установлен ли NPM необходимо в командной строке (консоле) выполнить команду:

Команда вернет текущую версию NPM

Пробуем как node.js работает с файлом

Для примера создайте файл test.js со следующим содержанием:

Console.log("Node is installed!");

И в командной строке (консоле) выполните следующую команду:

Node test.js

Как обновить Node.js и NPM

Для установки новых версий Node.js и NPM просто скачайте последнюю версию пакета с официального сайта и запустите ее.

Как удалить Node.js и NPM

Node.js и NPM удаляются так же как и большинство программ в Windows. Т.е. Control Panel => Uninstall a program выбираем Node.js жмем правую кнопку мыши и выбираем Uninstall.

Пакеты Node.js

Так же на сайте NPM () перечислены все официальные пакеты Node.js.

Последнее обновление: 18.11.2018

Кроме встроенных и кастомных модулей Node.js существует огромный пласт различных библиотек и фреймворков, разнообразных утилит, которые создаются сторонними производителями и которые также можно использовать в проекте, например, express, grunt, gulp и так далее. И они тоже нам доступны в рамках Node.js. Чтобы удобнее было работать со всеми сторонними решениями, они распространяются в виде пакетов. Пакет по сути представляет набор функциональностей.

Для автоматизации установки и обновления пакетов, как правило, применяются систему управления пакетами или менеджеры. Непосредственно в Node.js для этой цели используется пакетный менеджер NPM (Node Package Manager). NPM по умолчанию устанавливается вместе с Node.js, поэтому ничего доустанавливать не требуется. Но можно обновить установленную версию до самой последней. Для этого в командной строке/терминале надо запустить следующую команду:

Npm install npm@latest -g

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

Для нас менеджер npm важен в том плане, что с его помощью легко управлять пакетами. К примеру, создадим на жестком диске новую папку modulesapp (В моем случае папка будет находиться по пути C:\node\modulesapp ).

Далее для примера установим в проект express . Express представляет легковесный веб-фреймворк для упрощения работы с Node.js. В данном случае мы не будем пока подробно рассматривать фреймворк Express, так как это отдельная большая тема. А используем его лишь для того, чтобы понять, как устанавливаются сторонние модули в проект.

Для установки функциональности Express в проект вначале перейдем к папке проекта с помощью команды cd . Затем введем команду

Npm install express

После установки express в папке проекта modulesapp появится подпапка node_modules , в которой будут хранится все установленные внешние модули. В частности, в подкаталоге node_modules/express будут располагаться файлы фреймворка Express.

// получаем модуль Express const express = require("express"); // создаем приложение const app = express(); // устанавливаем обработчик для маршрута "/" app.get("/", function(request, response){ response.end("Hello from Express!"); }); // начинаем прослушивание подключений на 3000 порту app.listen(3000);

Первая строка получает установленный модуль express, а вторая создает объект приложения.

В Express мы можем связать обработку запросов с определенными маршрутами. Например, "/" - представляет главную страницу или корневой маршрут. Для обработки запроса вызывается функция app.get() . Первый параметр функции - маршрут, а второй - функция, которая будет обрабатывать запрос по этому маршруту.

И чтобы сервер начал прослушивать подключения, надо вызвать метод app.listen() , в который передается номер порта.

Запустим сервер командой node app.js:

И в адресной строке браузера введем адрес http://localhost:3000/ :

Файл package.json

Для более удобного управления конфигурацией и пакетами приложения в npm применяется файл конфигурации package.json . Так, добавим в папку проекта modulesapp новый файл package.json :

{ "name": "modulesapp", "version": "1.0.0" }

Здесь определены только две секции: имя проекта - modulesapp и его версия - 1.0.0. Это минимально необходимое определение файла package.json. Данный файл может включать гораздо больше секций. Подробнее можно посмотреть в документации .

Теперь снова добавим express с помощью следующей команды:

Npm install express --save

Флаг --save указывает, что информацию о добавленном пакете надо добавить в файл package.json.

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

{ "name": "modulesapp", "version": "1.0.0", "dependencies": { "express": "^4.14.0" } }

Информация обо всех добавляемых пакетах, которые используются при запуске приложения, добавляется в секцию dependencies .

Файл package.json играет большую роль и может облегчить разработку в различных ситуациях. Например, при размещении в разных репозиториях нередко мы ограничены выделяемым дисковым пространством, тогда как папка node_modules со всеми загруженными пакетами может занимать довольно приличное пространство. В этом случае удобнее разместить основной код проекта без node_modules. В этом случае мы можем определить все пакеты в файле package.json, а затем для загрузки всех пакетов выполнить команду

Эта команда возьмет определение всех пакетов из секций dependencies и загрузит их в проект.

devDependencies

Кроме пакетов, которые применяются в приложении, когда оно запущено, например, express, то есть в состоянии "production", есть еще пакеты, которые применяются при разработке приложения и его тестировании. Такие пакеты добавляются в другую секцию - devDependencies . В вышеприведенном примере она не определена, но если бы мы добавили какой-нибудь grunt или gulp, то они бы были именно в секции devDependencies.

Например, загрузим в проект пакет jasmine-node , который используется для тестирования приложения:

Npm install jasmine-node --save-dev

Флаг --save-dev указывается, что информацию о пакете следует сохранить в секции devDependencies файла package.json:

{ "name": "modulesapp", "version": "1.0.0", "dependencies": { "express": "^4.14.0" }, "devDependencies": { "jasmine-node": "^1.14.5" } }

Удаление пакетов

Для удаления пакетов используется команда npm uninstall . Например:

Npm uninstall express

Эта команда удаляет пакет из папки node_modules , в то же время в файле package.json информация о данном пакете остается. Чтобы удалить информацию также и из package.json, применяется флаг --save:

Npm uninstall express --save

Семантическое версионирование

При определении версии пакета применяется семантическое версионирование. Номер версии, как правило, задается в следующем формате "major.minor.patch". Если в приложении или пакете обнаружен какой-то баг и он исправляется, то увеличивается на единицу число "patch". Если в пакет добавляется какая-то новая функциональность, которая совместима с предыдущей версией пакета, то это небольшое изменение, и увеличивается число "minor". Если же в пакет вносятся какие-то большие изменения, которые несовместимы с предыдущей версией, то увеличивается число "major". То есть глядя на разные версии пакетов, мы можем предположить, насколько велики в них различия.

В примере с express версия пакета содержала, кроме того, дополнительный символ карет: "^4.14.0". Этот символ означает, что при установке пакета в проект с помощью команды npm install будет устанавливаться последняя доступная версия от 4.14.0. Фактически это будет последняя доступная версия в промежутке от 4.14.0 до 5.0.0 (>=4.14.0 и <5.0.0). Более подробно про сематическое версионирование в npm можно посмотреть .

Команды npm

NPM позволяет определять в файле package.json команды, которые выполняют определенные действия. Например, определим следующий файл app.js :

Let name = process.argv; let age = process.argv; console.log("name: " + name); console.log("age: " + age);

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

И определим следующий файл package.json :

{ "name": "modulesapp", "version": "1.0.0", "scripts" : { "start" : "node app.js", "dev" : "node app.js Tom 26" } }

Здесь добавлена секция scripts , которая определяет две команды. Вообще команд может быть много в соответствии с целями и задачами разработчика.

Первая команда называется start . Она по сути выполняет команду node app.js , которая выполняет код в файле app.js

Вторая команда назвывается dev . Она также выполняет тот же файл, но при этом также передает ему два параметра.

Названия команд могут быть произвольными. Но здесь надо учитывать один момент. Есть условно говоря есть зарезервированные названия для команд, например, start , test , run и ряд других. Их не очень много. И как раз первая команда из выше определенного файла package.json называется start. И для выполнения подобных команд в терминале/командной строке надо выполнить команду

Npm [название_команды]

Например, для запуска команды start

Npm start

Команды с остальными названия, как например, "dev" в вышеопределенном файле, запускаются так:

Npm run [название_команды]

Например, последовательно выполним обе команды.

Понравилось? Лайкни нас на Facebook