Получить бесплатную консультацию
Оставьте свои контакты, и с Вами
свяжутся наши специалисты
Заявка успешно отправлена!
С вами свяжется наш консультант :)
Произошла какая-то ошибка, пожалуйста, обновите страницу и попробуйте снова.
Средний
2 урока
(23 минуты)
Курс
Bower
Bower - пакетный менеджер для web. Перед вами подробный и наиболее полный в рунете видеокурс руководство по работе с Bower. Даже если вы давно знакомы с Bower, данный видеокурс будет вам полезен и раскроет некоторые не очевидные нюансы работы.

#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, что в будущем сэкономит вам силы и сбережет ваши нервы.

git_path

Что касается node.js и npm, то тут проверить очень просто:

Если вы вместо версии видите что-то вроде «comand not found», тогда жмите на паузу и идите на официальный сайт nodejs nodejs.org и скачивайте последнюю версию продукта.

Если с git и npm повросов и сомнений больше нет, тогда мы можем преступить к работе.

Давайте теперь установим сам bower

И сразу проверим его версию

Отлично. bower у нас установлен, теперь мы шаг за шагом будем погружаться в особенности работы с ним.

Поиск, инсталляция, обновление и удаление библиотек

Обычно, начинающие разработчики, для того, чтобы скачать какую-либо библиотеку, фреймворк или плагин, лезут в google, находят официальный сайт или репозиторий этого продукта и скачивают необходимые файлы. Вспомните сами, сколько раз вы заходили на jquery.com, чтобы скачать последнюю версию любимой всеми javascript программистами библиотеки?

Кто-то предпочитает хранить самые часто используемые библиотеки в отдельной папочке или копируют из проекта в проект. Работа становится быстрее, но не решается проблема устаривания версии продукта (т.е., когда выйдет новая версия библиотеки, придется опять лезть на официальный сайт).

Некоторые из вас предпочитают подключать библиотеки, используя CDN, т.е. подключают необходимые библиотеки со сторонних хостингов, чтобы увеличить скорость загрузки сайта. И таких разработчиков bower’у есть чем порадовать. Об этом мы еще будем говорить позже.

Bower же позволяет находить, скачивать, обновлять и удалять необходимые библиотеки практически моментально. Вы просто пишите необходимые команды в консоли и Bower делает всю работу за вас.

ПОИСК

Поиск необходимых библиотек мы можем осуществлять на официальном сайте, если пока что сомневаемся, или не привыкли к работе в консоли

Или прямо в консоли. Давайте попробуем найти jquery

Кстати, многие команды имеют свои укороченные варианты

Как мы видим, в консоли появился огромный список библиотек. Это различные плагины, которые в своём названии или описании имеют слово jquery. Огромный список сведетельствует о колосальных размеров сообществе frontend разработчиков, которые пишут эти библиотеки и регистрируют их в bower. Чтобы узнать более детальную информацию о библиотеке, например получить список версий продукта, используется команда info

УСТАНОВКА

Для установки любого нового пакета (или библиотеки) используется команда install или её сокращенный вариант i. Все вновь установленные библиотеки будут попадать в папку bower_components по-умолчанию.

Давайте теперь выведем прямо в коносль список установленных библиотек

Как теперь быстро добавить ссылки на скаченные библиотеки в index.html? Один из способов использовать команду list с ключем —path

ОБНОВЛЕНИЕ

Для обновления библиотек используется команда update, однако, чтобы полноценно с ней работать, нужно создать файл манифест bower.json, а мы этого пока не умеем. Если мы прямо сейчас попытаемся написать

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

Давайте попробуем и посмотрим, что у нас получится

Bower начинаем с нами советоваться, как поступить ему поступить! Он сообщает, что у нас уже установлен jquery#1.6.4 и мы можем либо оставить всё, как было, либо установить jquery#2.0.3. Мы выбираем второй вариант.

УДАЛЕНИЕ

jquery бесследно исчез из папки bower_components

Всё, первое знакомство с bower прошло успешно. Вы уже можете начинать работать и радоваться сэкономленному времени. Однако самое интересное еще впереди.

Инициализация Bower пакета. Файл манифест bower.json.

Чтобы ощутить следующие преимущества работы с Bower, необходимо создать так называемый файл «манифест» bower.json. Сделать это можно либо вручную, просто создав этот файл, либо в автоматическом режиме, набрав в консоли команду.

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

Давайте взглянем на него подробнее

  • name — единственное обязательное поле, т.е. остальные мы можем просто удалить, если пока они нам не нужны
  • version — версия вашего пакета. Обязательно 3 цифры
  • authors — авторы
  • ignore — перечень путей, которые мы хотим проигнорировать
  • dependencies — другие пакеты, от которых зависит ваш проект (на продакшене)

Обратите внимание, что normalize.css записался в наш файл манифест в объект dependencies. Это очень важный момент.

Давайте установим теперь библиотеку jquery, но уже немного не так, как мы это делали раньше. Мы явно укажем, что jquery обязательно должен быть в продакшен версии нашего проекта. Т.е., без него проект отдавать заказчику нельзя. Отныне мы все библиотеки, от которых зависит наш проект будем устанавливать с ключем —save.

А теперь представьте другую ситуацию. Она, конечно, встречается крайне редко (в отличае от того же npm и gulp, где ситуация обратная), однако вы должны знать все нюансы. Есть библиотеки, которые нужны только разработчику, т.е. нам с вами, именно в процессе разработки, но не нужны на продакшене.

Мне сложно придумать пример, потому что в своей повседневной разработке, я встречаюсь с этим давольно редко, если не сказать никогда.

К примеру, мне на ум пришла библиотека Zepto.js, которая очень похожа на облегченную версию jquery. Zepto не поддерживает старые версии internet explorer (младше 10ой версии), в отличие от jquery. Представим, что для наших каких-то собственных нужд мы будем использовать Zepto, но в продакшен версии продукта будет именно jquery. Так вот, такие библиотеки, которые нужно только разработчику, но не нужны на продакшене, необходимо писать не в dependencies, а в devDependencies. Делается это очень просто

Теперь давайте еще раз пройдем процедуру удаления, но на этот раз учтём файл манифест. Удаляя библиотеку физически, нам нужно подчищать и bower.json. В этих целях применяется всё тот же ключ —save (-S) или —save-dev (-D). Давайте удалим все наши библиотеки, но сделаем это корректно. Обратите внимание, что удалять, ровно как и устанавливать библиотеки можно просто перечисляя их одну за другой через пробел.

Подробнее про версии и обновление библиотек

Настоятельно рекомендую вам прочитать про «Семантическое версионирование«, чтобы вы понимали, как обновляя библиотеки не потерять обратную совместимость.

Давайте поговорим про версии более подробно. Еще раз установим jquery и запишем информацию о нём в файл манифест

У нас установилась последняя на день написания данного видеокаста версиия библиотеки, а именно версия 2.1.4

В bower.json появилась запись «~2.1.4». Тильда означает, что jquery в моём проекте можно обновлять, но не выше, чем до версии 2.2.0

Есть еще один символ, который вы будете встречать давольно часто — «домик». Если мы напишем «^2.1.4», то это будет означать, что jquery в моём проекте можно обновлять, но, на этот раз, не выше, чем до версии 3.0.0

Для наглядности я подготовил для вас такую табличку

000

Давайте теперь проведем эксперимент. Установим

В файле bower.json появилась запись jquery»: «1.0.1», добавим ~ перед версией и наберем

Теперь версия jquery станет 1.0.4

А если заменим ~ на ^

Теперь версия jquery станет 1.11.3

А если заменим ^ на latest, то получим версию 2.1.4

ВНИМАНИЕ! На момент просмотра этого скринкаста, возможно выйдут и более свежие версии библиотек. Главное, чтобы вы поняли суть.

Чтобы преступить к следующему шагу, давайте специально, в академических целях установим старинную версию jquery

Подробнее про зависимости

Все вы знаете или слышали про фреймворк 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 list

то увидим, что есть логические несоответствия в нашем файле манифесте, которые нам с вами предстоит решить.

Давйте вручную отредактируем bower.json. Напишем, что нам подходит версия jquery#2.1.4

Еще раз убедимся, что всё в порядке

bower list

Отлично! Видите, как здорово, bower никогда не даст нам запутаться в версиях и не поставит под угрозу работу нашего проекта.

Дополнительные настройки bower

У bower есть целый ряд дополнительных настроек, таких, как, например место расположения скаченных библиотек.

По-умолчанию, bower устанавливает все зависимости в папку bower_components. Однако, мы можем поменять как имя папки, так и её место расположение. Делается это очень просто: необходимо создать рабочий файл, который должен называться .bowerrc

В нём пишем

Теперь перенесем уже существующую папку в новое место. Для этого в консоли наберем

И установим новую библиотеку tooltipster

Наслаждайтесь результатом!

Делись:

Оставь комментарий!

One thought on “#1 — Bower — подробное руководство

Добавить комментарий

Рекомендуемые курсы