Bower — менеджер пакетов для браузера. Разработанный Twitter и доступный через npm, это означает, что дни ручного управления вашими клиентскими пакетами JavaScript могли скоро уйти в прошлое.
Для установки Bower вам понадобятся Node и NPM. Вы можете скачать и установить Node с сайта nodejs.org . NPM поставляется в комплекте с каждым бинарным пакетом, поэтому при установке Node, NPM должен автоматически устанавливаться одновременно. Вам также необходимо установить Git, так как Bower использует конечные точки Git для определения местоположения пакетов. Если у вас не установлен Git, вы можете скачать его с git-scm.com/downloads . После того, как вы установили Node, npm и Git, все что вам нужно сделать, это открыть свой терминал и набрать:
npm install bower -g Если вы новичок в NPM, то -g в конце означает, что Bower будет установлен глобально, а это значит, что мы можем запустить его из любого места в любом каталоге проекта. Давайте теперь запустим Bower и передадим ему команду --help чтобы увидеть, что именно она нам предлагает:
bower --help
Если вы будете следовать, вы увидите команды для установки, удаления и обновления пакетов, список пакетов, которые вы установили в данный момент, и поиск новых пакетов. Мы также можем получить справку по любой конкретной команде, передав эту команду:
bower help list
bower list просто перечисляет пакеты, которые мы установили. Если мы запустим его прямо сейчас, мы не увидим много, так как еще не установили никаких пакетов. Давайте исправим это, установив jQuery с помощью следующей команды.
bower install jquery
Когда вы запустите это, вы увидите, что Bower клонирует Git-репозиторий пакета, кэширует пакет в каталоге ~/bower , а затем копирует пакет в каталог components нашего текущего проекта (который Bower создаст, если он не существует). После загрузки самый простой способ включить jQuery в ваш проект — использовать обычный <script> , как показано ниже.
<script src="components/jquery/jquery.js"></script>
Конечно, вы можете свободно интегрировать Bower с выбранным вами инструментом пакетирования / минификации для более сложных проектов.
Вы заметите, что jQuery был установлен в своем собственном каталоге, который сам содержит jquery.js и файл components.json . Файл components.json очень похож на файл package.json используемый в модулях NPM. Он хранит метаданные о пакете вместе с любыми зависимостями, которые требует пакет. У пакета jQuery нет никаких зависимостей, но если мы установим пакет, у которого есть зависимости, Bower установит их одновременно. Усы jquery-зависимость зависят от усов, поэтому давайте установим их и посмотрим, что произойдет:
bower install jquery-Mustache
Вы увидите, как Bower сначала загрузит jquery-Mustache, а затем его зависимости. Мы можем проверить это, заглянув в наш каталог компонентов:
ls components jquery jquery-Mustache mustache
jquery-Усы, которые мы ожидали увидеть, и jQuery уже был там раньше, но, как вы можете видеть, Бауэр автоматически загрузил нам усы, и нам не пришлось об этом беспокоиться. Если мы посмотрим на файл jquery-Mustache components.json , мы увидим, как определяются зависимости:
"dependencies": { "jquery": ">=1.5", "mustache": ">=0.4" }
Когда Бауэр читает это, он знает, что должен загрузить как минимум версию 1.5 jQuery и как минимум версию 0.4 усов. Если вы запустите bower list сейчас, вы увидите, что Bower перечисляет ваши установленные пакеты с их зависимостями, вложенными в них.
Установка нескольких пакетов
Вам не нужно устанавливать свои пакеты по одному: вы можете передать разделенный пробелами список в bower install и он установит каждый пакет один за другим. Давайте установим еще несколько плагинов jQuery с помощью следующей команды.
bower install jquery.validation jquery.colorbox jquery.loadfeed
Деинсталляция пакетов
Удаление пакетов так же просто, как и их установка. В этом случае мы используем команду bower uninstall .
bower uninstall jquery.colorbox
Если вы по ошибке удалили пакет, являющийся зависимостью другого пакета, Bower предупредит вас, что вы удалили зависимость после ее удаления. Например, вы можете удалить jQuery с помощью следующей команды.
bower uninstall jquery
Когда вы удаляете jQuery, Бауэр предупреждает вас, что jquery.loadfeed depends on jquery . К счастью, переустановить jQuery достаточно просто.
Управление версиями пакета
Обновление пакетов тоже довольно безболезненно. Чтобы обновить jQuery до последней версии, мы набрали бы:
bower update jquery
И, чтобы увидеть, какие версии пакета доступны, мы можем запустить команду bower info :
bower info jquery
Издательские пакеты
Наконец, давайте кратко рассмотрим, как легко публиковать свои собственные пакеты с помощью Bower. Просто выполните следующие три шага:
- Создайте файл package.json вашего пакета
- Отправьте ваш пакет в конечную точку Git, например, GitHub.
- Запустите
Bower register yourpackagename git://github.com/yourusername/repositorynameзаменитьyourpackagenameBower register yourpackagename git://github.com/yourusername/repositorynameyourpackagename, имя пользователя и имяrepositorynameсоответствующим образом.
Это все, что нужно сделать. Вам не нужно создавать учетную запись или устанавливать любую аутентификацию. Имена пакетов распределяются по принципу «первым пришел — первым обслужен». Итак, вам просто нужно придумать уникальное имя для вашего пакета, и тогда другие разработчики смогут установить его, запустив bower install yourpackagename .
Вывод
В этой статье мы рассмотрели Bower, менеджер пакетов браузера, разработанный Twitter. Мы рассмотрели, как установить Bower через npm, как устанавливать, обновлять и удалять пакеты, а также как вы можете публиковать свои собственные пакеты.