Bower — быстрый старт

Сейчас очень много библиотек и фреймворков для френтед разработчиков, и уже не редкость когда в одном проекте пять или больше таких библиотек. И уследить за всеми, за новыми обновлениями становится все сложнее. Bower — пакетный менеджер от Twitter, он позволяет легко управлять всеми пакетами и зависимостями вашего проекта.

bower
image-356

В этом посте вы узнаете, как установить и работает с Bower. Мы начнем с его установки, а затем посмотрим на команды с помощью которых можно управлять библиотеками вашего проекта.

Установка Bower

Bower может быть установлен с помощью npm, менеджер пакетов Node.js. Если у вас еще не установлен npm или Node.js. Установите их, npm входит в состав Node.js.

После того как вы установите npm, откройте терминал и введите следующую команду:

npm install -g bower

Это позволит установить Bower на вашу систему.

Теперь, когда у вас установлен Bower, мы можем рассмотреть команды, которые используются для управления пакетами.

Поиск пакетов

Есть два способа, с помощью которых которые можно найти Bower пакеты. Либо с помощью онлайн каталога, или при помощи команды search.

bower search <имя пакета>

Например, для поиска пакетов, содержащих слово ‘JQuery’ вы могли бы сделать следующее:

bower search jquery

Эта команда вернет список результатов, некоторые из которых представлены в расположенной ниже фрагменте.

Search results:
    jquery git://github.com/components/jquery.git
    jquery-ui git://github.com/components/jqueryui
    jquery.cookie git://github.com/carhartl/jquery-cookie.git
    jquery-placeholder git://github.com/mathiasbynens/jquery-placeholder.git
    jquery-file-upload git://github.com/blueimp/jQuery-File-Upload.git
    jasmine-jquery git://github.com/velesin/jasmine-jquery
    jquery.ui git://github.com/jquery/jquery-ui.git
    ...

Каждый результат отображается в виде имя пакета и репозитория Git, они вам понадобятся для установки пакета.

Установка пакетов

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

bower install <package>

Также вместо имени пакета, вы можете установить его, использууя один из следующих способов:

  • Адресс репозитория Git: //github.com/components/jquery.git
  • Путь в локальное хранилище Git
  • Сокращение components/jquery. Bower будет предполагать, что GitHub используется по умолчанию
  • URL к архивам. Содержание файлы будут извлечены автоматически.

Вы можете установить определенную версию пакета, добавив знак решётки (#) после имени пакета, за которым следует номер версии.

bower install <package>#<version>

Установленные пакеты будут размещены в каталоге bower_components. Вы можете изменить папку с помощью параметров конфигурации в файле .bowerrc.

  • bower_components
    • jquery
      • jquery.js
      • jquery.min.js
      • jquery.min.map
    • modernizr
      • modernizr.js

После установки, вы можете использовать пакет, просто добавив script или link теги в ваш HTML файл. Хотя Bower пакеты чаще всего содержат файлы JavaScript, они также могут содержать CSS или даже изображения.

<script src="path/to/bower_components/jquery/jquery.min.js"></script>

Установка пакетов с использованием bower.json файла

Если вы используете несколько пакетов в вашем проекте это то удобно их перечислить в файле bower.json. Это позволит вам устанавливать и обновлять несколько пакетов с помощью одной команды.

{
"name": "app-name",
"version": "0.0.1",
"dependencies": {
"sass-bootstrap": "~3.0.0",
"modernizr": "~2.6.2",
"jquery": "~1.10.2"
},
"private": true
}

Вот простой пример bower.json файла, который определяет некоторую информацию о проектах, а также список зависимостей. Файл bower.json фактически используется, чтобы определить пакет Bower, так что по сути вы создаете свой собственный пакет, который содержит все зависимости для вашего приложения.

Основные команды Bower

Список установленных пакетов в проекте

bower list

Обновление пакетов

bower update

Обновление пакетов

bower update

или обновление конкретного пакета

bower update <название пакета>

Удаление пакетов

bower uninstall <название пакета>

Удаление пакетов

bower uninstall <название пакета>