Поиск, установка и удаление пакетов в 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 на официальном сайте

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

<!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>

<!DOCTYPE html>

<head>

<title>Bower</title>

</head>

<body>

</div>

</body>

</html>

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

var app = new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue!'
  }
})

var app = new Vue({

el: '#app',

data: {

message: 'Hello Vue!'

}

})

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

Тестирование подключения файла /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

Введение в Bower

Создание и настройка файлов .bowerrc и bower.json в Bower