Управление зависимостями проекта при помощи bower+composer

18 Jun 2014

Отлично. У нас есть новая интересная идея для нового проекта. Садимся мы значит за клавиатуру и… Эм. А что “и”? Наш проект зависит от кучи библиотек и фреймворков: yii, angularjs, doctrine, twitter bootstrap и т.д.

Ок. Открываем браузер или папочку на диске (в которой все нам нужное скачано и рассортировано) и начинаем неспешно скачивать/копировать/распаковывать.

Мы моложцы, справились. Все скопировали, но только злобные разработчики пофиксили баги и выкатили новую версию своей библиотеки, фреймворка.

Пофикшенные баги - это всегда хорошо. Начинаем процесс скачивания/распаковки заново.

Страшный сон? Кошмар разработчика? Нет-нет, что вы! Стандартная процедура, через которую проходят много-много разработчиков. И даже не задумывыются, что все это можно автоматизировать, упростить и дать себе возможность наконец-то реализовать задуманный проект, а не заниматься tar -xf или zip -u, или что у них там еще.

А ответ-то простой - это bower в связке с любым другим менеджером для вашего любимого языка (composer для php, npm для nodejs и т.п.). Больше всего мне приходится иметь дело с php, поэтому опишу на примере composer.

Опять же. Почему bower и composer. Потому что первый - это менеджер для фронтенд-составляющей, а второй - для бекенда. Композером не слишком удобно пользоваться для управления зависимостями морды приложения.

Начнем-с.

Для начала нам нужно этот самый bower поставить.

$ sudo npm install -g bower

Лирическое отступление на тему “зачем нужна опция -g”.

Существует два варианта установки:

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

Теперь надо сконфигурировать его.

Конфигурация осуществляется посредством файла .bowerrc, который может опцию directory, которая показывает, куда складывать всё скачиваемое. Остальные опции можно глянуть тут.

{  
    "directory" : "web/vendor/"  
}

Теперь можно указать зависимости. Все это делается в bower.json.

{  
 "name": "Cool application",  
 "dependencies": {  
 "bootstrap": "*"  
 }  
}

Пакеты можно искать на сайте http://bower.io/search/.

Или прямо из консоли

$ bower search angular

Теперь мы готовы к тому, чтобы сделать первоначальную установку.

$ bower install

Теперь можно объединить bower и composer. При таком подходе на каждый запуск composer install или composer update будет выполняться запуск bower install, который обновит все библиотеки.

Просто добавляем в composer.json

{  
 // ...  
 "scripts": {  
 "post-install-cmd": [  
 "bower install"  
 ],  
 "post-update-cmd": [  
 "bower install"  
 ]  
 }  
}

Теги: автоматизация javascript php

Категории: Разработка HowTo