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?
Чтобы его обновить, вам нужно снова скачать установщик и повторить весь процесс с самого начала.
Node.js делает возможным написание серверных приложений на JavaScript. Он построен на движке JavaScript V8 и написан на C++ - и поэтому он быстрый. Изначально он создавался как серверное окружение для приложений, но разработчики начали использовать его для создания инструментов, помогающих автоматизировать выполнение локальных задач. В итоге возникшая вокруг Node.js новая экосистема инструментов (типа Grunt и Gulp), привела к трансформации процесса фронтенд-разработки.
Чтобы использовать все эти инструменты (или пакеты) в Node.js нам нужна возможность устанавливать и управлять ими. Для этого создан npm, пакетный менеджер Node.js. Он устанавливает нужные вам пакеты и предоставляет удобный интерфейс для работы с ними. Но перед тем как начать использовать npm, вам надо установить в своей системе Node.js.
Установка Node.js
В этой статье мы будем использовать стабильную версию 5.7.0.
Посмотреть, где установлен Node и проверить версию можно следующими командами:
$ which node /usr/local/bin/node $ node --version v5.7.0
Чтобы удостовериться, что установка прошла успешно, выполним несколько команд в простой интерактивной среде Node (REPL).
$ node > console.log("Node is running"); Node is running > .help .break Sometimes you get stuck, this gets you out .clear Alias for .break .exit Exit the repl .help Show repl options .load Load JS from a file into the REPL session .save Save all evaluated commands in this REPL session to a file > .exit
Установка работает, поэтому теперь мы можем сфокусироваться на npm, который включен в установку.
$ which npm /usr/local/bin/npm $ npm --version 3.6.0
Пакеты Node
С помощью npm можно устанавливать пакеты локально или глобально. В локальном режиме пакеты устанавливаются в каталог node_modules родительского каталога. Владельцем каталога является текущий пользователь. Глобальные пакеты устанавливаются в каталог {prefix}/lib/node_modules/ , владельцем которого является root (префиксом в данном случае обычно является каталог /usr/ или /usr/local). Это значит, что вам надо использовать sudo для глобальной установки пакетов, что может повлечь ошибки с полномочиями при разрешении сторонних зависимостей, а также создает проблему для безопасности. Изменим это:
Изменение места установки глобальных пакетов
Посмотрим, что скажет нам команда npm config .
$ npm config list ; cli configs user-agent = "npm/3.6.0 node/v5.7.0 linux x64" ; node bin location = /usr/local/bin/node ; cwd = /home/sitepoint ; HOME = /home/sitepoint ; "npm config ls -l" to show all defaults.
Мы получили основную информацию об установке. Теперь важно узнать место установки глобальных пакетов:
$ npm config get prefix /usr/local
Этот префикс мы хотим изменить так, чтобы устанавливать пакеты в свой домашний каталог. Для этого создайте в домашнем каталоге папку.node_modules_global и укажите ее в качестве места установки пакетов в конфигурации:
$ cd && mkdir .node_modules_global $ npm config set prefix=$HOME/.node_modules_global
Внеся такую небольшую правку в конфигурацию, мы изменили место для глобальной установки пакетов. Также в нашем домашнем каталоге появился файл.npmrc .
$ npm config get prefix /home/sitepoint/.node_modules_global $ cat .npmrc prefix=/home/sitepoint/.node_modules_global
Сам npm по-прежнему установлен в каталог, владельцем которого является root. Но так как мы поменяли место установки глобальных пакетов, мы можем использовать полученное преимущество. Мы установим npm еще раз, но теперь в место, указанное нами. Заодно мы получим последнюю версию npm.
$ npm install npm --global /home/sitepoint/.node_modules_global/bin/npm -> /home/sitepoint/.node_modules_global/lib/node_modules/npm/bin/npm-cli.js /home/sitepoint/.node_modules_global/lib └── [email protected]
Наконец, нам надо добавить.node_modules_global/bin в нашу переменную окружения $PATH , чтобы мы могли запускать глобальные пакеты из командной строки. Сделаем это, добавив следующую строку в файл.profile или.bash_profile и перезапустив терминал.
Export PATH="$HOME/.node_modules_global/bin:$PATH"
Теперь командная оболочка будет сразу находить пакеты, установленные в.node_modules_global/bin и использовать корректную версию npm .
$ which npm /home/sitepoint/.node_modules_global/bin/npm $ npm --version 3.7.5
Глобальная установка пакетов
На данный момент у нас уже есть один глобальный пакет - это сам пакет npm. Изменим это и установим еще один пакет, это будет UglifyJS (инструмент для минификации JavaScript). Для глобальной установки используется флаг --global , его можно записывать сокращенно -g .
$ npm install uglify-js --global /home/sitepoint/.node_modules_global/lib └─┬ [email protected] ├── [email protected] ├── [email protected] ├── [email protected] └─┬ [email protected] ├── [email protected] ├─┬ [email protected] │ ├─┬ [email protected] │ │ ├─┬ [email protected] │ │ │ ├─┬ [email protected] │ │ │ │ └── [email protected] │ │ │ ├── [email protected] │ │ │ └── [email protected] │ │ └── [email protected] │ ├── [email protected] │ └── [email protected] ├─┬ [email protected] │ └── [email protected] └── [email protected]
Как вы можете видеть из вывода в консоль, у нас установлены дополнительные пакеты - это зависимости UglifyJS.
Вывод списка установленных пакетов
Мы можем вывести список глобально установленных пакетов с помощью команды npm list с опцией --global:
$ npm list --global ├─┬ [email protected] │ ├── [email protected] │ ├── [email protected] │ ├── [email protected] │ ├── [email protected] .................... └─┬ [email protected] ├── [email protected] ├── [email protected] ├── [email protected]
Такой вывод списка, со всеми зависимостями, перенасыщен. Мы можем выводить его в более читаемом виде с помощью опции --depth=0:
$ npm list -g --depth=0 ├── [email protected] └── [email protected]
Стало лучше - теперь мы видим только список установленных пакетов с номерами их версий, без зависимостей.
Теперь мы можем обрабатывать файлы JavaScript в терминале с помощью UglifyJS. Например, следующая команда сделает из файла example.js минифицированный example.min.js:
$ uglifyjs example.js -o example.min.js
Локальная установка пакетов
Локальная установка используется в npm по умолчанию, то есть достаточно не использовать флаг --global . Пакет будет установлен в каталог node_modules родительского каталога. Создадим каталог с проектом в нашем домашнем каталоге:
$ mkdir ~/project && cd ~/project $ npm install underscore /home/sitepoint/project └── [email protected] $ ls node_modules $ ls node_modules underscore
Вывод списка локальных пакетов
Также как и в случае с глобальными пакетами, список локальных выводится командой npm list:
$ npm list /home/sitepoint/project └── [email protected]
Как видите, мы можем устанавливать локальные пакеты, где угодно. Это также значит, что мы можем создать другой каталог и установить туда другую версию пакета (в нашем случае это библиотека underscore).
Удаление локальных пакетов
Так как npm это пакетный менеджер, у него есть возможность удалять пакеты. Предположим, что установленная в предыдущем примере версия underscore вызывает проблемы с совместимостью. Мы можем удалить этот пакет и поставить более старую версию.
$ npm uninstall underscore - [email protected] node_modules/underscore $ npm list /home/sitepoint/project └── (empty)
Установка определенной версии пакета
Теперь установим нужную версию underscore. В команде установки номер версии указывается после символа @ :
$ npm install [email protected] /home/sitepoint/project └── [email protected] $ npm list /home/sitepoint/project └── [email protected]
Обновление пакета
В последней версии underscore исправили мешавший нам баг и мы хотим обновить версию этого пакета.
$ npm update underscore [email protected] node_modules/underscore $ npm list /home/sitepoint/project └── [email protected]
Примечание: для этой статьи, библиотека underscore была указана как зависимость в package.json (см. ).
Поиск пакетов
Мы уже пару раз использовали команду mkdir . Есть ли пакет node с подобным функционалом?
$ npm search mkdir npm WARN Building the local index for the first time, please be patient
Заключение
В этой статье освещены основы работы с npm. Я показал, как установить Node.js, как изменить место установки глобальных пакетов (так мы можем избежать использования sudo) и как установить пакеты локально и глобально. Я также рассмотрел удаление, обновление и установку определенной версии пакета, а также управление зависимостями проекта.
В каталоге npm тысячи пакетов и их число будет расти, с учетом анонса jQuery о публикации всех плагинов как пакетов 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 является неотъемлемой частью веб-разработки. 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.
Современная разработка очень тесно связана с использованием 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
Удалить пакет:
npm r PACKAGEУдалить глобально установленный пакет:
npm rm PACKAGE -gОбновить пакеты:
npm upИ в заключение, если вы пользуетесь конролем версий 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: