Варианты установки пакетов
Bower может устанавливать пакеты не только из собственного репозитория, но и со сторонних источников.
# Установка всех зависимостей проекта, перечисленные в файле bower.json
$ bower install
# Установка пакета из репозитория Bower
$ bower install jquery
# Установка пакета из Github
$ bower install repository/projectname
# Установка с помощью Git
$ bower install git://github.com/user/package.git
# Установка со стороннего источника
$ bower install https://example.ru/script.js
Как искать пакеты в репозитории Bower?
Во первых искать пакеты можно на официальном сайте в разделе Search Packages, там же перечислены все популярные технологии.

Также пакеты можно искать в терминале, для примера найдем все пакеты содержащие слово Vue.
bower search vue
Результат будет следующим:
[meliorem@centos7 ~]$ bower search vue
Search results:
vue https://github.com/vuejs/vue.git
vue-ps https://github.com/MarcErdmann/vue-ps.git
vue-mq https://github.com/zukilover/vue-mq.git
vue-rx https://github.com/vuejs/vue-rx.git
ax-vue https://github.com/activewidgets/vue-adapter.git
vue-ls https://github.com/RobinCK/vue-ls.git
vuep https://github.com/litson/Vue-plugins.git
vue-dnd https://github.com/lain-dono/vue-dnd.git
vuex https://github.com/vuejs/vuex.git
vue-mdl https://github.com/posva/vue-mdl.git
vueb https://github.com/jameymcelveen/vueb.git
rice-vue https://github.com/sophiware/rice-vue.git
vue_demo https://github.com/bxcn/ajaxData.git
just-vue https://github.com/justclear/just-vue.git
vue-mobx https://github.com/dwqs/vue-mobx.git
vue-grid https://github.com/BastianHofmann/vue-grid.git
vue-head https://github.com/ktquez/vue-head.git
vue-nats https://github.com/antonioaguilar/vue-nats.git
vue-form https://github.com/fergaldoyle/vue-form.git
vue-valid https://github.com/optick/vue-valid.git
vue-intl https://github.com/pagekit/vue-intl.git
brix-vue https://github.com/thx/brix-vue.git
vue-attr https://github.com/pjrader1/vue-attr.git
vue-i18n https://github.com/kazupon/vue-i18n.git
vueis https://github.com/JustClear/vue-is.git
vue-touch https://github.com/vuejs/vue-touch.git
vue-modal https://github.com/MartyWallace/vue-modal.git
vue-panel https://github.com/ericmcdaniel/vue-panel.git
vue-audio https://github.com/shershen08/vuejs-sound-player.git
vue-typed https://github.com/budiadiono/vue-typed.git
Если вы работаете в учетной запись root, то для использования Bower добавляйте флаг --allow-root
после каждой команды.
Как установить пакет в Bower?
Перед установкой какого-либо пакета перейдите в каталог где хранится ваш проект и где вы хотите хранить все зависимости Bower. Для примера я выберу каталог с проектом example.ru.
Перейдем в каталог с нашим проектом, в котором хранится только файлы index.html
и js/main.js
.
cd /var/www/example.ru/www
Установим пакет vue.js.
bower install vue
[meliorem@centos7 /var/www/example.ru/www]$ bower install vue
bower vue#* not-cached https://github.com/vuejs/vue.git#*
bower vue#* resolve https://github.com/vuejs/vue.git#*
bower vue#* download https://github.com/vuejs/vue/archive/v2.5.22.tar.gz
bower vue#* extract archive.tar.gz
bower vue#* resolved https://github.com/vuejs/vue.git#2.5.22
bower vue#^2.5.22 install vue#2.5.22
vue#2.5.22 bower_components/vue
[meliorem@centos7 /var/www/example.ru/www]$
После установки в проекте появится каталог bower_components, в котором хранится каталог vue со всеми зависимыми файлами.
Чаще всего нужные вам файлы для подключения хранятся в каталоге dist
. Например, для начала использования Vue.js нам понадобится подключить файл /bower_components/vue/dist/vue.min.js
.
Перейдем в файл index.html
нашего проекта и подключим установленный vue.js и сразу проверим его в работе.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 |
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Bower</title> <!-- Подключаем vue.js --> <script src="bower_components/vue/dist/vue.min.js"></script> </head> <body> <!-- Тестируем работу vue.js --> <div id="app"> {{ message }} </div> <script src="js/main.js"></script> </body> </html> |
Файл js/main.js
выглядит следующим образом.
1 2 3 4 5 6 |
var app = new Vue({ el: '#app', data: { message: 'Hello Vue!' } }) |
После подключения мы можем убедиться, что всё работает.

Как установить пакет определенной версии?
Чтобы установить пакет с определенной версией, при установке используйте символ #
после которого укажите нужную вам версию.
Для примера установим пакет jQuery. Сначала узнаем какие версии jQuery нам доступны.
bower info jquery
Допустим нам нужно установить версию 1.12.4.
bower install jquery#1.12.4
Проверка установленных пакетов
Если вы хотите узнать какие пакеты установлены в текущем проекте, то воспользуйтесь следующей командой.
bower list
С помощью bower list
вы также сможете узнать версии установленных пакетов.
Как удалить пакет в Bower?
Удаление пакетов производится с помощью следующей команды.
bower uninstall package_name
Для примера удалим установленный ранее vue.js.
bower uninstall vue
Заключение
В данной статье мы рассмотрели как благодаря Bower вы сможете в разы ускорить скачивание зависимостей (пакетов) для вашего проекта.
Напомню также, что все нужные файлы в основном хранятся в каталоге /bower_components/packagename/dist
.
Чтобы подробнее узнать о всех командах, вызовите Bower c флагом --help
или воспользуйтесь официальной документацией на сайте https://bower.io/docs/api.
bower --help