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 используется как оболочка для работы с NPM и его пакетами (всем известная папка node_modules).
В данной статье я постараюсь перечислить все самые популярные команды для NPM: установка, обновление, удаление пакетов и др.
И всё таки думаю что стоит для начала упомянуть пару важных консольных команд для Node JS.
Чтобы посмотреть список всех команд доступных в Node.js, для этого нужно ввести в консоли команду:
Для этого есть команда node --version или короткий вариант команды этой же команды node -v . Так как краткость - сестра таланта, я пользуюсь командой:
Если расписывать команды 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:
В отличии от Node.js, NPM знает как обновить себя! Чтобы обновить свой NPM до последней версии, вводим в терминале такую команду:
Npm install npm@latest -g
Npm update npm -g
Инициализация пакетов - это процесс быстрой установки пакетов NPM-а, которые прописаны в файле package.json
Команда npm init создаст файл package.json или установит прописанные пакеты из файла package.json если он уже создан.
Npm init
Установить пакеты из файла 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 сменилась версия на мажорную, то есть была изменена первая цифра в версии пакета (например установлена версия пакета 4.19.1, а последняя версия 5.3.0), то она не обновится командой npm up . Это сделано в целях безопасности.
Для обновления мажорной версии есть такая команда:
Npm i -g npm-check-updates && ncu -a && npm i
В итоге будут обновлены все пакеты.
Делайте такое обновление только в случае если вы уверены и понимаете что делаете. Мажорная версия несёт изменения для которых есть изменения в настройках.
Посмотрите это видео, где есть понятное объяснение по версиям пакетов NPM:
В этом руководстве я расскажу: как установить вебпак (webpack), его зависимости и настроить объединение и минимизацию скриптов через него.
Это первая часть серии "Webpack в NetBeans проекте".
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 - т.к. в терминале вылезет сообщение что их нет. Двинуться без этих пакетов дальше будет нельзя.
В жизни никогда через терминал и командную строку не работал. Всё на кнопочки тыкал. Но тут так не прокатит.
В 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 install <пакет>
Таким методом будет установлен пакет в папку node_modules относительно вашего проекта. Порой вам будет нужно установить библиотеки глобально, чтобы вы могли получить к ним доступ из кода любого приложения, не обязательно требуя их как зависимость.
Чтобы сделать это, вам нужно добавить флаг -g в процессе установки:
$ npm install -g <пакет>
В зависимости от того, как Node.js установлен в вашей системе, у вас может не оказаться доступа для установки глобального пакета. Чтобы обойти это, просто добавьте команду sudo в начале:
$ sudo npm install -g <пакет>
Наиболее распространённым примером использования 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 для получения дополнительной подробной информации.
package.json содержит много особенностей. Чтобы узнать больше о том, как это всё работает, посетите
npm - это пакетный менеджер node.js . С его помощью можно управлять модулями и зависимостями.
Небольшая шпаргалка всех моих любимых команд npm:
Кроме того, поскольку http-server пакет имеет свой исполняемый файл, то этот файл также будет установлен как исполняемый http-server и доступен в командах.
Теперь вы можете просто запустить команду:
http-server