Bower - менеджер пакетов, упрощающий установку и обновление сторонних библиотек, которые используются в проекте.
Для чего нужен Bower?
Существует множество причин, чтобы использовать менеджер пакетов, например, Bower.
- Вы устали каждый раз находить, скачивать пакеты и перетаскивать их в проект.
- Вам нужна конкретная версия библиотеки для всех ваших проектов.
- Вам нужен простой способ получить все нужные пакеты.
Например, вы хотите включить в ваш проект библиотеку jQuery. Раньше вам пришлось бы идти на официальный сайт, скачивать архив, распаковать и перетащить нужный фйл в проект. С помощью Bower это можно сделать одной строкой: bower install jquery
. В результате jQuery будет установлена в папку bower_components вашего проекта.
Установка Bower
Для работы с нашим менеджером пакетов потребуются Node.js, npm (пакетный менеджер, входящий в Node.js) и Git. Скачайте Node.js с официального сайта и установите его.
Для проверки узнаем версии Node.js и npm, набрав в консоли node ‑v
и npm ‑v
соответственно.
Мы убедились, что все работает и теперь можем перейти к установке Bower, для этого наберите в консоли npm install -g bower
. Ключ –g
означает, что пакет (в данном случае Bower) будет установлен глобально. Без этого ключа пакет будет установлен в текущей директории.
Установка пакетов в Bower
Пакеты можно установить командой bower install <пакет>
. Например:
# имя пакета
bower install jquery
# ссылка на git-репозиторий (относительная)
bower install desandro/masonry
# ссылка на git-репозиторий (полная)
bower install git://github.com/user/package.git
# URL
bower install http://example.com/script.js
Посмотреть установленные пакеты можно командой bower list
. Удаляется пакет командой bower uninstall <пакет>
.
Установка определенной версии пакета
Если вам нужна конкретная версия пакета, ее можно установить, указав номер версии:
bower install jquery#1.8.3
bower install git://github.com/components/jquery.git#~1.8.3
bower install components/jquery#1.8.x
Поиск пакетов
Если вы не уверены, что требуемый пакет существует, введите в консоли bower search <пакет>
. Также вы можете воспользоваться онлайн сервисом:
Если вы хотите посмотреть все установленные пакеты, - введите bower list
.
Настройка Bower для проекта
Для использования Bower в проекта вам потребуются 2 файла:
- .bowerrc - файл, указывающий куда будут загружается компоненты.
- bower.json Файл, который говорит менеджеру пакетов, какие нужны пакеты.
Директория с компонентами
По-умолчанию, Bower устанавливает пакеты в каталог bower_components, что не всегда требуется. Чтобы изменить каталог по-умолчанию, мы должны создать файл .bowerrc:
// .bowerrc
{
"directory": "libs"
}
Теперь пакеты будут устанавливаться в папку libs
. Теперь давайте поговорим об установке нескольких пакетов сразу.
Установка нескольких пакетов
Обычно для проекта вы будете иметь больше, чем один пакет и каждый раз писать bower install
для каждого пакета - приятного мало. Давайте создадим файл bower.json с пакетами, которые нам нужны:
// bower.json
{
"name": "sample-app",
"version": "1.0.0",
"dependencies": {
"bootstrap": "latest",
"font-awesome": "latest",
"animate.css": "latest",
"angular": "latest"
}
}
Теперь, чтобы установить эти пакеты, введите в консоли bower install
. После этого, Bower изучит файл bower.json и установит все, что нам нужно в нашу папку libs.
Используем наши Bower-пакеты
Теперь у нас есть все пакеты, которые нам нужны в нашем проекте. Все, что мы должны теперь сделать - это сослаться на них в документе:
<!-- index.html -->
<!doctype>
<head>
<link rel="stylesheet" href="libs/bootstrap/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="libs/font-awesome/css/font-awesome.min.css">
<link rel="stylesheet" href="libs/animate.css/animate.min.css">
<script src="libs/jquery/jquery.min.js"></script>
<script src="libs/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="libs/angular/angular.min.js"></script>
</head>
...