Блог хеллоуворлдщика

Зачем нужен Bower? Как использовать Bower? Введение в Bower.


Зачем нужен Bower и с чем его едят - наверно, каждый, кто в первый раз сталкивается с ним, задаётся этим вопрос. Bower, это такой же пакетный менаджер, как и Composer, но для Javascript, а не PHP, который очень сильно упрощает работу с пакетами. Из преимуществ следует отметить то, что мы легко можем получить любой пакет, а так же обновить его до последней версии.

Стоит отметить то, что время, когда всё делать ручками - ушло. Давайте уже использовать современные методы и технологии. Для некоторый это, возможно будет сложно, но такие вещи как Composer или Bower - прекрасны.

Введение в Bower

Bower - это пакетный менаджер для Javascript, используя который, можно легко, к примеру, получить библиотеку jQuery не пользуясь браузером. Всё что нам потребуется, это набрать в консоли bower install jquery и вот у нас уже есть это библиотека.

Для того, чтобы начать использовать Bower, его нужно установить. Устанавливается он для разных ОС и дитрибутивов по-разному. Поэтому какой-то дополнительной информации, кроме, которая есть на оф.сайте Bower я не буду добавлять. Не будем плодить тырнет неработающими статьями по установке Bower, которых и так достаточно. Скажу только, что вам потребуется установленный Node.js, npm и Git.

Как использовать Bower?

После установки, перейдем в корень директории вашего проекта и создадим конфигурационный файл .bowerrc для Bower с таким содержимым:

{
  "directory": "public_html/assets/"
}

Как вы уже заметили, Bower тоже используется JSON как и Composer. В только что созданном файле мы указали директорию установки всех пакетов по умолчанию.

Теперь давайте установим jQuery:

bower install jquery

После успешного выполнения комманды у нас в public_html/assets будет лежать папка jquery с одноименной библиотекой, которую мы можем подключить.

Я указал директорию по умолчанию к папке с вложениями используемыми на сайте, как вариант. Скорее всего, вы задались вопросом "что делать с лишними файлами"? Всё очень просто. Удалять их нет необходимости, если вы используете Git. Достаточно создать в директории assets файл .gitignore где мы можем указать все директории или файлы, которые не желаем видеть в репозитории, тем самым они туда никогда не попадут, независимо от того, сколько раз мы обновим библиотеку. Если же вы не пользуетесь Git - начините. Хватит оставаться в пещере.

Теперь предлагаю установить библиотеку, которая не зарегистрирована в Bower. К примеру установим это https://github.com/bupy7/Gallerama. Это моя галерея, когда-то мной написанная, но так и не доведенная до ума. Если мы вобьём название репозитория в поиск, то получим фигу, потому что там отсутствует файл bower.json в отличии от https://github.com/objectivehtml/FlipClock где этот файл есть и мы прекрасно можем найти этот репозиторий если напишем

bower search objectivehtml/flipclock 

и так же просто его установим

bower install objectivehtml/flipclock

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

bower install https://github.com/bupy7/Gallerama.git

И эта библиотека у нас появится в папке с остальными.

Зачем нужен Bower

Этот вопрос, я надеюсь исчерпан. Удобная штука, не правда ли?)

Итог

Всё это, конечно, поверхностная информация, поэтому обязательно почитайте оф.документацию http://bower.io/ , мы много чего еще не использовали.

share via vkontakte share via facebook share via mailru share via odnoklassniki share via twitter

Комментарии [8]

[Игорь] 26 нояб. 2015 г., 15:22:39

Привет, Михалыч! Не нашёл куда закомментить. Напишу тут. Вижу ты ещё не пробовал Combining and Compressing Assets. Кстати неплохая тема для татьи. В документации как-то описано не слишком подробно.

Администратор [BUPY7] 26 нояб. 2015 г., 16:29:57

Это из какого пакета?

[Игорь] 26 нояб. 2015 г., 22:52:48

Не, это я про консольный скрипт ./yii asset Позволяет создать шаблон, в котором описываешь все бандлы ассетов. Затем по шаблону скрипт объединяет все js в один и так же с css. В итоге в приложении подключаешь только эти 2 файла (в prod).

Администратор [BUPY7] 27 нояб. 2015 г., 11:26:10

Ну, я использую LESS или SASS для CSS,где можно объединять все в один файл встроенными возможностями, а вот с JS не вижу смысла объединения. Да и с CSS тоже) Не всегда лучший вариант, это подгружать все при первом посещении. От ситуации зависит.

Если будет время - попробую, может напишу чего интересного. =)

[Виталий] 01 марта 2016 г., 9:47:18

Все это здорово, но в Bower может меняться структура пакета и старый путь станет нерабочим. Без сборщика будет печально

Администратор [BUPY7] 01 марта 2016 г., 11:12:55

Хм, пока не сталкивался, можно пример?

[JUZA] 06 марта 2017 г., 2:51:51

Все было бы замечательно, если бы Bower не выкачивал вместо одного-единственного нужного JS файла тонн мусора. 21 век, быстрый интернет, большие винты и все такое - это просто отлично. Но! ..я еще даже не начинал кодить, а будущий "HTML-прототип" вместе с Нодами, Галпами и прочими полезностями уже занимает 90 Мб и 10500 файлов - как два сайта на Вордпрессе. Еще Бовер для каждого плагина качает весь репозиторий целиком. Не проще ли скачать и вручную подключить в index.html нужную библиотеку? Писанины и возни при этом даже меньше чем при установке "продвинутым" способом.

Администратор [BUPY7] 06 марта 2017 г., 12:24:12

Это все упрощает процесс разработки на больших проектах. Если у вас простой одностраничник, то это все не имеет смысла. Везде нужно знать грань разумного и не переходить её.