#1 — Bower — подробное руководство
Bower — пакетный менеджер для web. Первое подробное руководство в рунете. Пришло время разобрать bower «по косточкам».
Bower — пакетный менеджер для web
Всем привет! Меня зовут Дмитрий Ковальчук и я представляю вам первый урок в курсе «Bower — подробное руководство». Мы пройдем путь от основ, до лучших практик и продвинутых техник.
Начнём с определения. Bower — это пакетный менеджер для web. У него масса преимуществ и им пользуются если не все, то большинство современных опытных frontend специалистов. Сегодня стыдно не знать Bower и это не просто мэйнстрим. Bower действительно упрощает нам жизнь.
Как установить bower?
Для того, чтобы работать с Bower, у вас должны быть установлены node.js c npm, а также git. Я работаю из консоли git bash в оболочке conemu. Вам, особенно если вы новичок, рекомендую также работать именно в git bash. Если у вас нет git и git bash, то скачайте его с официального сайта git-scm.com
Если вы пользователь windows, не забудьте во время установки перевести radio button в положение «Run Git from the Windows Command Prompt». Таким образом, git автоматически будет добавлен в ваш PATH, что в будущем сэкономит вам силы и сбережет ваши нервы.
Что касается node.js и npm, то тут проверить очень просто:
Если вы вместо версии видите что-то вроде «comand not found», тогда жмите на паузу и идите на официальный сайт nodejs nodejs.org и скачивайте последнюю версию продукта.
Если с git и npm повросов и сомнений больше нет, тогда мы можем преступить к работе.
Давайте теперь установим сам bower
[js]npm install -g bower[/js]
И сразу проверим его версию
Отлично. bower у нас установлен, теперь мы шаг за шагом будем погружаться в особенности работы с ним.
Поиск, инсталляция, обновление и удаление библиотек
Обычно, начинающие разработчики, для того, чтобы скачать какую-либо библиотеку, фреймворк или плагин, лезут в google, находят официальный сайт или репозиторий этого продукта и скачивают необходимые файлы. Вспомните сами, сколько раз вы заходили на jquery.com, чтобы скачать последнюю версию любимой всеми javascript программистами библиотеки?
Кто-то предпочитает хранить самые часто используемые библиотеки в отдельной папочке или копируют из проекта в проект. Работа становится быстрее, но не решается проблема устаривания версии продукта (т.е., когда выйдет новая версия библиотеки, придется опять лезть на официальный сайт).
Некоторые из вас предпочитают подключать библиотеки, используя CDN, т.е. подключают необходимые библиотеки со сторонних хостингов, чтобы увеличить скорость загрузки сайта. И таких разработчиков bower’у есть чем порадовать. Об этом мы еще будем говорить позже.
Bower же позволяет находить, скачивать, обновлять и удалять необходимые библиотеки практически моментально. Вы просто пишите необходимые команды в консоли и Bower делает всю работу за вас.
ПОИСК
Поиск необходимых библиотек мы можем осуществлять на официальном сайте, если пока что сомневаемся, или не привыкли к работе в консоли
Или прямо в консоли. Давайте попробуем найти jquery
[js]bower search jquery[/js]
Кстати, многие команды имеют свои укороченные варианты
[js]bower s jquery[/js]
Как мы видим, в консоли появился огромный список библиотек. Это различные плагины, которые в своём названии или описании имеют слово jquery. Огромный список свидетельствует о колоссальных размерах сообщества frontend разработчиков, которые пишут эти библиотеки и регистрируют их в bower. Чтобы узнать более детальную информацию о библиотеке, например получить список версий продукта, используется команда info
[js]bower info jquery[/js]
УСТАНОВКА
Для установки любого нового пакета (или библиотеки) используется команда install или её сокращенный вариант i. Все вновь установленные библиотеки будут попадать в папку bower_components по-умолчанию.
[js]bower install jquery#1.6.4[/js]
[js]bower i normalize.css[/js]
Давайте теперь выведем прямо в консоль список установленных библиотек
Как теперь быстро добавить ссылки на скаченные библиотеки в index.html? Один из способов использовать команду list с ключем —path
[js]bower list —path[/js]
ОБНОВЛЕНИЕ
Для обновления библиотек используется команда update, однако, чтобы полноценно с ней работать, нужно создать файл манифест bower.json, а мы этого пока не умеем. Если мы прямо сейчас попытаемся написать
[js]bower update jquery[/js]
то ничего не произойдет, т.к. во время первичной установки мы жестко указали версию библиотеки 1.6.4 Так что сейчас, пока у нас нет файла манифеста, мы можем установить, например jquery 2.0.3 просто поверх 1.6.4
Давайте попробуем и посмотрим, что у нас получится
[js]bower i jquery#2.0.3[/js]
Bower начинаем с нами советоваться, как поступить ему поступить! Он сообщает, что у нас уже установлен jquery#1.6.4 и мы можем либо оставить всё, как было, либо установить jquery#2.0.3. Мы выбираем второй вариант.
УДАЛЕНИЕ
[js]bower uninstall jquery[/js]
jquery бесследно исчез из папки bower_components
Всё, первое знакомство с bower прошло успешно. Вы уже можете начинать работать и радоваться сэкономленному времени. Однако самое интересное еще впереди.
Инициализация Bower пакета. Файл манифест bower.json.
Чтобы ощутить следующие преимущества работы с Bower, необходимо создать так называемый файл «манифест» bower.json. Сделать это можно либо вручную, просто создав этот файл, либо в автоматическом режиме, набрав в консоли команду.
В данном файле будет хранится вся информация о нашем проекте, такая как: название, версия, а самое главное — перечень зависимостей, т.е. библиотек, которые необходимы для работы нашего проекта.
Давайте взглянем на него подробнее
Обратите внимание, что normalize.css записался в наш файл манифест в объект dependencies. Это очень важный момент.
Давайте установим теперь библиотеку jquery, но уже немного не так, как мы это делали раньше. Мы явно укажем, что jquery обязательно должен быть в продакшен версии нашего проекта. Т.е., без него проект отдавать заказчику нельзя. Отныне мы все библиотеки, от которых зависит наш проект будем устанавливать с ключем —save.
[js]bower i jquery —save[/js]
[js]bower i jquery -S[/js]
А теперь представьте другую ситуацию. Она, конечно, встречается крайне редко (в отличае от того же npm и gulp, где ситуация обратная), однако вы должны знать все нюансы. Есть библиотеки, которые нужны только разработчику, т.е. нам с вами, именно в процессе разработки, но не нужны на продакшене.
Мне сложно придумать пример, потому что в своей повседневной разработке, я встречаюсь с этим довольно редко, если не сказать никогда.
К примеру, мне на ум пришла библиотека Zepto.js, которая очень похожа на облегченную версию jquery. Zepto не поддерживает старые версии internet explorer (младше 10ой версии), в отличие от jquery. Представим, что для наших каких-то собственных нужд мы будем использовать Zepto, но в продакшен версии продукта будет именно jquery. Так вот, такие библиотеки, которые нужно только разработчику, но не нужны на продакшене, необходимо писать не в dependencies, а в devDependencies. Делается это очень просто
[js]bower i zepto —save-dev[/js]
[js]bower i zepto -D[/js]
Теперь давайте еще раз пройдем процедуру удаления, но на этот раз учтём файл манифест. Удаляя библиотеку физически, нам нужно подчищать и bower.json. В этих целях применяется всё тот же ключ —save (-S) или —save-dev (-D). Давайте удалим все наши библиотеки, но сделаем это корректно. Обратите внимание, что удалять, ровно как и устанавливать библиотеки можно просто перечисляя их одну за другой через пробел.
[js]bower uninstall jquery normalizr.css -S[/js]
[js]bower uninstall zepto -D[/js]
Подробнее про версии и обновление библиотек
Настоятельно рекомендую вам прочитать про «Семантическое версионирование», чтобы вы понимали, как обновляя библиотеки не потерять обратную совместимость.
Давайте поговорим про версии более подробно. Еще раз установим jquery и запишем информацию о нём в файл манифест
[js]bower i jquery -S[/js]
У нас установилась последняя на день написания данного видеокаста версия библиотеки, а именно версия 2.1.4
В bower.json появилась запись «~2.1.4». Тильда означает, что jquery в моём проекте можно обновлять, но не выше, чем до версии 2.2.0
Есть еще один символ, который вы будете встречать довольно часто — «домик». Если мы напишем «^2.1.4», то это будет означать, что jquery в моём проекте можно обновлять, но, на этот раз, не выше, чем до версии 3.0.0
Для наглядности я подготовил для вас такую табличку
Давайте теперь проведем эксперимент. Установим
[js]bower i jquery#1.0.1 -S[/js]
В файле bower.json появилась запись jquery»: «1.0.1», добавим ~ перед версией и наберем
[js]bower update jquery[/js]
Теперь версия jquery станет 1.0.4
А если заменим ~ на ^
[js]bower update jquery[/js]
Теперь версия jquery станет 1.11.3
А если заменим ^ на latest, то получим версию 2.1.4
ВНИМАНИЕ! На момент просмотра этого скринкаста, возможно выйдут и более свежие версии библиотек. Главное, чтобы вы поняли суть.
Чтобы преступить к следующему шагу, давайте специально, в академических целях установим старинную версию jquery
[js]bower i jquery#1.4 -S[/js]
Подробнее про зависимости
Все вы знаете или слышали про фреймворк bootstrap. Его также можно установить при помощи bower. Многие из вас также знают, что bootstrap зависит от jquery. bower также это знает.
Bower знает всё о зависимостях вашего проекта и позаботится, чтобы они между собой не конфликтовали.
bower i bootstrap -S
bower понимает, что для корректной работы последней версии bootstrap необходим jquery#1.9.1 и сообщает нам о возможных неприятностях со старой версией jquery.
bower предлагает нам самим решить, как поступить в данном случае. Давайте выберем вариант bootstrap#3.3.4 и jquery#1.9
теперь, если мы наберем команду
то увидим, что есть логические несоответствия в нашем файле манифесте, которые нам с вами предстоит решить.
Давйте вручную отредактируем bower.json. Напишем, что нам подходит версия jquery#2.1.4
Еще раз убедимся, что всё в порядке
Отлично! Видите, как здорово, bower никогда не даст нам запутаться в версиях и не поставит под угрозу работу нашего проекта.
Дополнительные настройки bower
У bower есть целый ряд дополнительных настроек, таких, как, например место расположения скаченных библиотек.
По-умолчанию, bower устанавливает все зависимости в папку bower_components. Однако, мы можем поменять как имя папки, так и её место расположение. Делается это очень просто: необходимо создать рабочий файл, который должен называться .bowerrc
Теперь перенесем уже существующую папку в новое место. Для этого в консоли наберем
[js]mv bower_components app/bower[/js]
И установим новую библиотеку tooltipster
[js]bower i tooltipster -S[/js]
Пакетный менеджер Bower
Сегодня мы рассмотрим пакетный менеджер Bower, назначение и особенности работы с ним.
Пакетный менеджер Bower позволяет быстро находить и устанавливать библиотеки в проект.
Требуется node.js и npm
Необходимо установить bower глобально:
npm install -g bower
или
npm bower i
Проверка какая версия bower установлена:
bower -v
Поиск и установка библиотек:
Поиск библиотек через bower возможен двумя путями:
1. Через консоль
bower s jquery
чтобы получить больше информации о конкретной библиотеке необходимо подать команду
bower info jquery
чтобы установить библиотеку нужно:
bower i jquery#2.1.1
В проекте создастся папка bower_components
2. Через официальный сайт bower
Просмотр установленных библиотек:
Обновление библиотек:
bower update jquery
или установить другую версию
bower i jquery#1.6.4
Удаление библиотек:
bower unstall jquery
Или
bower unstall jquery -S
При использовании bower.json указание ключа -S или -D является обязательным!
Подключение библиотек в html
Чтобы получить путь к библиотеке можно воспользоваться командой:
bower list —path
и скопировать полученные пути в html
Файл bower.json
Для генерации этого файла:
bower init
Для установки зависимостей из файла bower.json подаём команду:
bower install
Для включения библиотеки в сборку на продакше необходимо подавать команду (dependencies)
bower i jquery
или
bower i jquery -S
Для пометки библиотеки только как служебной, нужной только в процессе разработки, пишем команду: (devdependencies)
bower i jquery -D
Напротив версии библиотеки может быть указана её версия с спец. символом:
«jquery»: «~1.4.6» — версию библиотеки можно обновлять не выше чем 1.4.5
«jquery»: «^1.4.6» — можно обновлять, но не выше 1.5.0
«jquery»: «latest» — последняя версия библиотеки
Настройка bower
Чтобы изменить место для скачиваемых библиотек необходимо
1. Создать файл .bowerrc
2. Указать путь в параметре directory
1 2 3
{ "directory": "lib/bower" }
3. Создаём папку lib в корне сайта
Bower — зачем нужен, установка и настройка
На данный момент, Bower один инструмент front-end разработчиков по всему миру. Наряду с Grunt и Gulp, он вызывает много вопросов у начинающих разработчиков.
Что же такое Bower? Говоря по простому, Bower управляет пакетами, которые вы захотите использовать в проекте. Важно отметить, что в данном случае «пакет» имеет несколько другое значение, чем библиотека или фреймворк.
Bootstrap — это пакет. jQuery — это тоже пакет.
Приведем цитату с официального сайта:
Веб-сайты сделаны из многих частей — фреймворки, библиотеки, css и javascript файлы. Bower управляет всеми составляющими.
Почему надо использовать Bower?
Как разработчик, вы должны стремиться к тому, чтобы максимально автоматизировать свою работу. Неэффективно грузить файлы библиотек и фреймоворков в проект по отдельным файлам. Используя Bower вам не нужно будет заниматься загрузкой вручную.
Например, вы хотите установить Angular в ваш проект. Вместо того, чтобы искать в интернете, где скачать файлы Angular или подключить CDN, вы можете запустить команду bower install angular и bower установит фреймворк в ваш проект.
Использование bower.json и .bowerrc
bower.json и .bowerrc — это два основных файла для работы с bower.
Bower.json
Настроив bower.json вы можете использовать одни и те же пакеты в разных проектах. По принципу работы он очень похож на package.json. Он состоит из различных зависимостей для конкретного проекта.
Эти пакеты определяются в виде JSON объектов.
Для того, чтобы установить пакеты, надо создать файл bower.json с зависимостями в папке вашего проекта и запустить команду bower install.
Дополнительно, вы можете использовать командную строку для добавления нужных пакетов в bower.json. Для этого надо использовать команду bower install
Установка и использование Bower
Bower – это менеджер пакетов для фронт-енда (библиотек javascript и фреймворков css). Он работает на Node.js, а также использует Git для извлечения и установки большинства пакетов.
В этом руководстве показано, как установить Bower на виртуальный выделенный сервер Ubuntu 12.04. Для выполнения руководства нужен готовый к работе виртуальный сервер. Также нужно установить Node.js и NPM (Node Packaged Modules); чтобы получить инструкции по установке данных программ, читайте эту статью.
Установка Bower
Для начала нужно установить Git. Чтобы подробнее узнать, как это сделать, читайте руководство «Установка Git на Ubuntu 12.04»; в целом, для быстрой установки можно использовать:
sudo apt-get install git-core
Чтобы установить Bower, запустите следующую команду (при условии, что Node.js и NPM установлены):
npm install -g bower
Теперь менеджер пакетов Bower установлен на виртуальный выделенный сервер. Запстите следующую команду, чтобы получить больше информации о доступных командах.
Примечание: имейте в виду, что при использовании учетной записи root необходимо вносить в команду опцию –allow-root:
bower help —allow-root
Использование Bower
Теперь когда Bower установлен, можно посмотреть, как он управляет зависимостями пакетов.
Перейдите в root-каталог веб-сервера.
Создайте новую папку и откройте ее:
mkdir project
cd project
Это – root-каталог проекта. Предположим, проект будет использовать Twitter Bootstrap. Для этого можно загрузить zip-файл Bootstrap и распаковать его на облачном сервере. Тем не менее, при работе с Bower можно превратить сам проект в пакет, объявить Bootstrap зависимостью, и тогда менеджер пакетов Bower скачает эту зависимость. Для этого понадобится файл с именем bower.json, который будет содержать перечень зависимостей. В данном примере в этот список будет внесен Bootstrap.
Итак, создайте новый файл по имени bower.json в root-каталоге проекта:
и внесите в него следующее:
Сохраните файл и закройте его. Теперь в зависимостях данного проекта указана программа Bootstrap 3.0+. Чтобы Bower загрузил и установил ее (как и другие заявленные зависимости), запустите следующую команду (не забудьте внести опцию —allow-root при работе через root-пользователя):
Обратите внимание: теперь в папке проекта должна появиться новая папка по имени bower_components, содержащая две папки: bootstrap и jquery (пакет jQuery был установлен потому, что он необходим для работы Bootstrap).
Чтобы просмотреть уже установленные для проекта пакеты, используйте команду:
Чтобы данный список содержал также и пути к файлам, которые нужно добавить в разрабатываемое приложение (например, файлы .js или .css), внесите в команду опцию –paths:
bower list —paths
Еще один способ установить пакет – использовать команду install, указав пакет, который необходимо установить на VPS. Итак, создайте другую папку проекта и установите в нее Bootstrap:
cd /var/www
mkdir project2
cd project2
Перейдя в новую папку проекта, запустите следующую команду:
bower install bootstrap
Как видите, данная команда дала тот же результат, но гораздо быстрее. Обратите внимание, эту команду Bower можно использовать для установки практически любого ПО. Так, например, если bootstrap в этой команде заменить на адрес git, менеджер пакетов извлечет указанный проект git:
bower install git://github.com/someone/some-package.git
Данная команда способна извлекать даже zip-файлы:
bower install http://www.example.com/package.zip
Чтобы удалить локально установленный пакет проекта, выполните следующую команду:
bower uninstall bootstrap
Конечно, нужно просто заменить bootstrap именем пакета, который необходимо удалить.