Установка Node.js, npm и Bower под Linux Mint
June 01, 2014
Статья посвящена вопросу установки Node.js и пакетного менеджера npm под операционную систему Linux Mint 17 “Qiana” Cinnamon (64-bit).
Также рассмотрен вопрос установки пакетного менеджера Bower в этой же операционной системе.
Почему выбрана система Linux Mint — об этом не стоит говорить долго. Это система гораздо удобнее для задач кодинга, нежели Windows. Пакеты Node.js и пакетный менеджер npm необходим для дальнейшего изучения ремесла верстальщика.
Дело в том, что популярный фреймворк Foundation для своей корректной работы требует первоначальной установки Node.js. Автор планирует в дальнейшем познакомиться с фреймворком Foundation, поэтому ему потребовалась установка вышеназванных пакетов.
О том, что такое Node.js, в этой статье также не будет описано. Во-первых, автор статьи имеет лишь поверхностное представление об этом сервере. А во-вторых, в Интернете есть немало хороших материалов по данному вопросу.
Установка Node.js
Для установки пакета Node.js под систему Linux Mint можно воспользоваться официальным сайтом проекта — Node.js. В разделе Download имеется табличка для скачивания различных версий пакета Node.js. В случае системы Linux в этой таблице нужно найти строку Linux Binaries.
Однако я не буду “заморчиваться” установкой из исходного кода. В Linux Mint есть прекрасный менеджер пакетов , которым можно и нужно воспользоваться для быстрой и безопасной установки Node.js под Linux. Единственный минус такого подхода — в результате у меня на машине будет стоять не самая свежая версия сервера Node.js. Однако в данном случае это абсолютно не критично.
В терминале ввожу команду:
… пару секунд терпения и у меня под Linux Mint 17 “Qiana” Cinnamon (64-bit) установлен пакет Node.js версии:
На момент написания статьи самая свежая версия Node.js (как указано на официальном сайте) — это 0.10.28. Как видим, разница в версиях небольшая, так что я поступил правильно, воспользовавшись .
Установка npm под Linux Mint
Как хорошо известно, у данного сервера имеется свой собственный менеджер пакетов npm (Node Packaged Modules), для установки дополнительных модулей под Node.js. Другими словами, с помощью менеджера npm можно установить под сервер Node.js любой модуль, имеющийся в наличии на репозитории GitHub. Модуль расширяет возможности сервера Node.js в зависимости от того, какой это модуль (тавтология). С кратким описанием и списком всех модулей под Node.js можно ознакомиться на официальном сайте проекта npm — Node Packaged Modules.
При установке в свою систему Linux Mint через у меня был установлен только сам сервер Node.js. При этом менеджер пакетов npm отстуствовал в системе. Не знаю, как это происходит при установке пакета Node.js из исходников, но при использовании у меня получилось именно так. Поэтому следующим шагом будет инсталляция менеджера пакетов npm под систему Linux Mint.
В терминале Linux ввожу команду:
Пробежит много-много строк, но в результате в системе появиться пакет npm:
Использование менеджера npm очень похоже на использование менеджеров пакетов a-la Linux: , , и так далее. npm также является консольной командой и у него схожие ключи, поэтому пользователи Linux без труда разберутся с ним:
Давайте проверим работу установленного менеджера npm. Для этого я в специально отведенной директории Projects создам поддиректорию npm, перейду в нее для дальнейшего удобства работы и установлю в этой поддиректории модуль из репозитория npm:
Если теперь посмотреть содержимое поддиректории npm c помощью команды , то обнаружим появление папки , внутри которой располагается подпапка c содержимым одноименного модуля:
Модуль Underscore успешно установлен и менеджер npm также успешно справился со своей задачей.
Установка менеджера Bower под Linux Mint
Переходим к заключительному (и продолжительному) вопросу данной статьи и рассмотрим установку менеджера пакетов Bower. Могу предвидеть у читателей логичный вопрос: “Как — еще один менеджер пакетов?! Но зачем? Разве не хватает npm, c которым мы только что познакомились?”
Все правильно! npm — это менеджер пакетов. И Bower — тоже менеджер пакетов. Отличие первого от второго заключается в том, что npm — это менеджер пакетов для сервера Node.js (и только). А Bower (хотя сам является модулем под Node.js) — это менеджер пакетов для всего проекта в целом.
Npm понимает и может работать только с JavaScript-приложениями (модулями под Node.js, написанными на этом языке). Bower умеет работать с пакетами на JavaScript, HTML, CSS. C помощью него можно одним движением добавить в разрабатываемый проект все, что нужно: библиотеку jQuery, фреймворк Foundation, модуль Underscore, сброс стилей Normalize.css и так далее.
Не нужно самому “вручную” выискивать на безбрежных просторах Интернет пакет и подключать его в проект — Bower это сделает сам. Заманчиво, не правда ли? На официальной странице проекта Bower можно почитать подробную информацию о данном менеджере (правда, на английском языке). В разделе Search Packages можно поискать нужный пакет для установки.
Я же приступлю к установке Bower на свою локальную машину. Так как Bower является модулем для Node.js, то его можно установить с помощью менеджера npm:
Однако, если запустить после этого в терминале команду просмотра версии, то увидим такой результат:
Исправить ситуацию можно созданием ссылки:
Теперь если снова посмотреть версию установленного пакета, увидим следующее:
Создаю специальную поддиректорию в директории Projects, перехожу туда и запускаю менеджер bower на установку пакета jquery:
Если до этого момента на локальной машине (как у меня) не был установлен пакет , то самое время это сделать, иначе bower не сможет установить указанный пакет jquery:
Все пакеты для скачивания и установки менеджер bower берет с GitHub, поэтому без пакета git этот менеджер не сможет обойтись.
Установка Git на Linux производится простой командой:
После этого, повторив команду установки jquery через bower, получаю следующий отзыв в консоли:
Если посмотреть на содержимое поддиректории , то увидим, что там появилась директория , в которой находится поддиректория c установленным пакетом:
В результате была установлена последняя версия библиотеки jQuery — 2.1.1. Если нужна какая-то конкретная версия пакета (jQuery, в частности), то нужно это указать с помощью тега:
Внимательный читатель мог заметить, менеджер пакетов Bower также (как и npm) является консольным. Список доступных для него команд можно получить вызовом:
В частности, для обновления уже установленного пакета существует команда:
Для удаления установленного пакета имеется команда:
Посмотреть информацию о пакете:
Этой командой можно воспользоваться при настройке файла пакетной установки
Плагин Bower под Sublime Text
Под редактор Sublime Text имеется одноименный плагин Bower, который в точности повторяет все возможности менеджера Bower. Все преимущество использования плагина Bower заключается в том, что производить инсталляцию, обновление или удаление пакетов можно прямо в редакторе Sublime Text, не переходя в консоль.
Установка плагина Bower выполняется стандартно — через менеджер пакетов Sublime Text: нажимаем сочетание клавиш Shift+Ctrl+P, введем в строке Install и выбираем из появившегося списка пакет Bower.
Теперь попробуем установить какой-либо пакет, не выходя из Sublime Text, c помощью плагина Bower. Для этого снова нажмем сочетание клавиш Shift+Ctrl+P, вводим Bower:Install и из появившегося списка выбираем пакет Foundation (к примеру).
Видим, как в панели проектов Sublime Text, в папке появилась целая куча подпапок, являющихся частью единого целого — фреймворка Foundation:
Настройка плагина Bower
Поддиректория , в которую плагин Bower производит установку пакетов, не является чем-то постоянным. То есть, можно легко изменить имя и расположение этой директории. Делается это следующим образом — в Sublime Text нажимаем сочетание клавиш Shift+Ctrl+P и вводим Bower: Configure project (никто не запрещает создать файл конфигурации вручную).
В текущую директорию автоматически добавиться файл типа json, в котором будет всего лишь одна строка — имя директории, в которую производится установка пакетов через плагин Bower:
Для эксперимента изменим имя папки с:
… удалим старую директорию с пакетом foundation и установим через Bower другой пакет — underscore. В результате получим следущее:
Пакетная установка в менеджере Bower
У менеджера пакетов Bower есть еще одна замечательная особенность. Это возможность пакетной установки через специально созданный конфигурационный файл. Другими словами, создается специальный файл формата json ( ), в котором прописываются имена всех пакетов, которые необходимы для установки в данном проекте. Затем в консоли запускается менеджер Bower c одной командой:
… менеджер bower прочитает файл и автоматически установит все пакеты, перечисленные в нем. Отлично, не правда ли?
Примечание: начиная с Bower v.0.9 файл конфигурации был переименован в файл , который я буду использовать в дальнейшем.
Файл имеет следующий формат:
… где — это имя проекта, — версия проекта, — зависимости проекта. Под зависимостями проекта подразумевается список сторонних пакетов (к примеру — foundation, backborne, jquery и так далее), которые используются при создании данного проекта.
Прописав в этом списке нужные пакеты, тем самым мы заставим Bower автоматически отслеживать наличие указанных пакетов для текущего проекта. Но, от слов к делу — давайте попрактикуемся и создадим примерный файл для текущего “проекта” bower. Для этого я удалю все ранее установленные в этой поддиректории пакеты:
… создам в этой директории пустой файл и наполню его следующим содержимым:
… где — самая последняя версия пакета. Сохраняю изменения, перехожу в консоль и запускаю команду:
В результате будет произведена автоматическая установка всех перечисленных в файле пакетов. Кроме того, Bower умеет отслеживать зависимости пакетов. В моем примере в консоль была выведена следующая информация:
… то есть, Bower отследил, что я устанавливаю библиотеку jQuery версии 1.9.1; но при этом самая последняя версия фреймворка Foundation 5.2.3 требует для своей работы jQuery версии 2.1.1. Вот менеджер и спрашивает у меня — как быть дальше? Ай да Bower!
Добавление зависимостей в файл bower.json
После создания пакетного файла в менеждере Bower можно автоматически добавлять в него запись при ручной установке отдельного пакета. Допустим, в ходе работы срочно потребовалась установка пакета backbone.
Тогда выполняем следующую команду:
… пакет (и его зависимость ) успешно установились. Но нас интересует факт добавления записи в файл , поэтому смотрим:
Автоматическое создание файла bower.json
Помимо ручного создания и настройки файла , у данного менеджера предусмотрена команда для автоматического создания и настройки этого файла. Для этого необходимо в консоли запустить команду:
… тогда менеджер проведет нас “за ручку” через все этапы создания настроек файла путем задания серии вопросов. Взгляните на примерный результат вышеназванной команды:
Плагин AutoFileName в Sublime Text
Редактор Sublime Text имеет неизмеримое количество полезных плагинов. Одним из них является AutoFileName — незаменимая вещь для автодополнения путей файлов в проекте. Кто имел мало-мальский опыт работы в Dreamveawer (или подобные ему IDE), могут сразу догадаться, о чем идет речь.
Поэтому данный плагин “must have” в коллекции под рабочую версию Sublime Text любого верстальщика.
Заключение
Завершаю обзор установки пакетов Node.js, npm и Bower под систему Linux Mint. Надеюсь, статья оказалась достаточно полной, точной и грамотной. В ее написании неоценимую помощь оказало видео “ Bower — Обзор пакетного менеджера “ Sorax’а.
Angular — именованные outlets
Для меня немного запутанная картина с именованными областями отображения и главное — с правильной настройкой. Нужно немного прояснить для. … Continue reading