Поиск, установка и удаление пакетов в Bower

Варианты установки пакетов

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, там же перечислены все популярные технологии.

Поиск пакетов в Bower на официальном сайте
Поиск пакетов в Bower на официальном сайте

Также пакеты можно искать в терминале, для примера найдем все пакеты содержащие слово 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 и сразу проверим его в работе.

Файл js/main.js выглядит следующим образом.

После подключения мы можем убедиться, что всё работает.

Тестирование подключения файла /bower_componets/vue/dist/vue.min.js
Тестирование подключения файла /bower_componets/vue/dist/vue.min.js

Как установить пакет определенной версии?

Чтобы установить пакет с определенной версией, при установке используйте символ # после которого укажите нужную вам версию.

Для примера установим пакет 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