Последнее обновление: 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 [название_команды]

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

  • Перевод

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

Установка npm

Обновление npm

Есть несколько способов чтобы обновить npm. Я предпочитаю:
curl https://npmjs.org/install.sh | sh
или
npm install npm -g

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

npm search hook.io
Подсказка: Можно также использовать search.npmjs.org
Вторая подсказка: Для поиска необходимо знать имя нужного пакета (всё прекрасно ищет по любому слову как в имени пакета, так и в его описании, может неправильно перевёл?)

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

npm view hook.io

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

Для демонстрации возьмём пакет http-server.
http-server is a package we"ve written which provides an easy to use wrapper around node"s core http.Server class. This module makes for a good example, since it"s API provides both a CLI binary and a requirable node.js module.
http-server - пакет, который мы написали, предоставляет более простой интерфейс в использовании базового модуля http.Server из node.js. Этот модуль хороший пример использования API как для бинарного CLI, так и для подключаемого модуля node.js.
npm install http-server
Так мы установим http-server в нашей рабочей директории.
Вы увидите новую папку в node_modules. Сейчас можете не обращать на это внимание.

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

mkdir mynewapp/ cd mynewapp npm install http-server touch test.js
test.js
var HTTPServer = require("http-server"); var httpServer = new HTTPServer({ root: "./public" }); httpServer.start();
запустим скрипт
node test.js
Обратите внимание, как мы делаем: require("http-server")? Что это за магия? (автор молодец)
http-server не является базовым модулем node.js. Этот пакет мы только что установили из npm. Node.js и npm взаимодействуют и автоматически подключают наши локальные модули из node_modules директории.

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

По умолчанию npm будет устанавливать все пакеты в локальном каталоге, в которым вы сейчас работаете. Это правильно. Это может показаться немного запутанным, если вы раньше работали с предыдущими системами управления пакетами.
Например: mkdir anotherapp/ cd anotherapp/ touch test.js
test.js
var HTTPServer = require("http-server");
теперь запустим наш скрипт
node test.js
мы получим эту ошибку:
node.js:134 throw e; // process.nextTick error, or "error" event on first tick ^ Error: Cannot find module "http-server" at Function._resolveFilename (module.js:326:11) at Function._load (module.js:271:25) at require (module.js:355:19) at Object. (/Users/maraksquires/dev/nodeapps/anotherapp/test.js:1:80) at Module._compile (module.js:411:26) at Object..js (module.js:417:10) at Module.load (module.js:343:31) at Function._load (module.js:302:12) at Array. (module.js:430:10) at EventEmitter._tickCallback (node.js:126:26)
Это вполне логично, мы установили http-server локально в "/mynewapp/", а не в "/anotherapp/".
Есть два решения в этой ситуации:
а) Установить ещё раз пакет, но локально в наше новое приложение
cd anotherapp/ npm install http-server
б) Установить пакет глобально
npm install http-server -g

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

Если вы хотите чтобы пакет был доступен всем приложениям, его нужно установить глобально:
npm install http-server -g
Флаг -g означает, что http-server должен быть установлен глобально и быть доступными для всех приложений.
Теперь мы можем вызывать его require("http-server") в любом нашем приложении.

Кроме того, поскольку http-server пакет имеет свой исполняемый файл, то этот файл также будет установлен как исполняемый http-server и доступен в командах.
Теперь вы можете просто запустить команду:
http-server

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

npm uninstall http-server

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

npm uninstall http-server -g

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

npm install [email protected]

Установка модуля с Github

Важно. В некоторых случаях будут патчи, форки или ветви, которые вы хотите использовать, но которые еще не были опубликованы в npm. К счастью исходные коды для большинства npm модулей также доступна на www.github.com
git clone git://github.com/nodeapps/http-server.git cd http-server/ npm link
Теперь наша клонированная версия http-server связана локально.

Связи любых пакетов локально

Если у вас есть отдельный каталог содержащий пакет npm, то можно создать локальную связь для него. Это удобно в ситуациях, когда мы не хотим опубликовать наш пакет в хранилище npm.
cd http-server/ npm link
На нашу локальную версию http-server создана «связана» для нашей локальной машины. (связь создаётся как «copy-paste», с начало нужно перейти в нужный катало и сделать «copy», потом перейти в нужный каталог и сделать «paste». Так вот сейчас мы изучили как делается «copy», а ниже будет про «paste» этого модуля)

Связи локальных пакетов для нескольких приложений

Как мы видели ранее npm устанавливает пакеты в локальный каталог по умолчанию. Так вот npm ссылка(связь) работает почти так же.
mkdir newapp/ cd newapp/ npm link http-server
Мы указываем, что теперь создали связь из http-server в наше новое приложение newapp. Если бы мы не выполнили npm link http-server, то получили бы ошибку об отсутствующем модуле. (а вот наш и «paste» о чём я писал выше, теперь вам должна быть понятна логика создания связей)

Отмена связи между пакетами приложения

cd newapp/ npm unlink http-server
(здесь мы просто отменяем наш «paste» для этого приложения)

В этом руководстве я расскажу: как установить вебпак (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?». Но что для меня действительно важнее, это не где Node находится сегодня, а где он будет завтра. Без сомнения, сообщество Rails принесло много к столу, но все эти замечательные идеи сложно проглотить, потому что они оказались заперты внутри Ruby. Каким бы потрясающим не был Ruby, не каждый желает стать разработчиком на Ruby.

В зависимости от процесса установки, npm может быть установлен, а может быть и нет. Для проверки просто запустите:

$ npm --version

Если npm не установлен, выполните следующее:

$ curl http://npmjs.org/install.sh | sh

npm - менеджер пакетов для Node, так что вы не можете использовать менеджер пакетов для установки менеджера пакетов.

Использование npm

Теперь, когда npm установлен, все зарегистрированные пакеты являются просто командой в консоли. Для базовой установки пакета выполните:

$ npm install <пакет>

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

Чтобы сделать это, вам нужно добавить флаг -g в процессе установки:

$ npm install -g <пакет>

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

$ sudo npm install -g <пакет>

Использование npm с проектом

Наиболее распространённым примером использования npm является поддержка манифеста зависимостей для вашего проекта. Всё это хранится в файле package.json .

Вы можете создать этот файл самостоятельно, хотя также есть методы сгенерировать этот файл. В любой папке просто запустите npm init и в консоли вы пройдёте через ряд вопросов, в результате получите что-то вроде такого:

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

Если в вашем проекте уже содержится package.json, добавить в него пакет очень легко с помощью npm install. Просто включите флаг --save в команду следующим образом:

$ npm install <пакет> --save

Добавление Grunt в проект обновит package.json, добавив объект dependencies в файл:

{ "name": "toss-this", "version": "0.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "grunt": "^0.4.5" } }

В добавление к этому, если вы хотите указать зависимость только для разработки, а не для рабочего проекта, то передайте флаг -dev:

$ npm install <пакет> --save-dev

Добавив Gulp как зависимость для разработки, в файле package.json появится объект devDependencies:

{ "name": "toss-this", "version": "0.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "", "license": "ISC", "dependencies": { "grunt": "^0.4.5" }, "devDependencies": { "gulp": "^3.6.2" } }

Узнайте больше о npm

npm удивительно сложная утилита, когда дело доходит до управления пакетами. Смотрите эту шпаргалку по npm для получения дополнительной подробной информации.

Узнайте больше о package.json

package.json содержит много особенностей. Чтобы узнать больше о том, как это всё работает, посетите

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.


Close