Bower - менеджер assets пакетов (JavaScript, CSS)

Категория: JavaScript

Каждый проект по мере развития обрастает сторонними JavaScript библиотеками. Для подключения каждой нужно найти ее, скачать, распаковать, добавить на страницу, а также поддерживать их в актуальном состоянии. И так на для каждого проекта! Всю эту ручную работу можно оптимизировать с помощью таких инструментов как пакетный менеджер зависимостей (package manager) и утилит для сборки (build tools).

Менеджер пакетов также позволяет исключить из репозитория все сторонние библиотеки, а хранить только файл с инструкциями для их загрузки и подключения.

Утилиты сборки позволяют управлять подключением нужных файлов и пакетов, минифицировать и сжимать исходники в один файл для более быстрой загрузки (GruntJS, Sprockets, RequireJS).

Далее в статье речь пойдет о менеджере пакетов Bower. Ссылка на сервис для поиска зависимостей онлайн. Документация по файлам конфигурации.

Обзор Bower

Написан на JavaScript под платформу NodeJS. Что умеет Bower:

  • Загрузка пакетов из основного репозитория, GIT репозитория, по ссылке на JS файл;
  • Умеет распаковывать архивы;
  • Контроллирует и исключает повторную загрузку зависимых пакетов;

Установка и обновление Bower

Установка и обновление Bower - задачи довольно тривиальные. Радует наличие автоматической проверки актуальной версии Bower:


sudo npm install -g bower  # глобальная установка bowersudo npm update -g bower   # обновление bower

Для успешной установки Bower должны быть установлены Git Core, Node.js и NPM:

sudo apt-get install git-core nodejs npm

Управление пакетами

Для получения информации по всем доступным командам Bower, воспользуйтесь встроенной справкой:

bower help

По умолчанию, все пакеты будут устанавливаться в подкаталог проекта  bower_components/. Вы можете задать другое название для каталога с пакетами. Не изменяйте файлы в этом каталоге!

Инициализация

Интерактивное создание файла конфигурации bower.json для объявления нового пакета:

bower init

Рассмотрим некоторые параметры инициализации.

Тип модуля

В процессе инициализации вам будет задан вопрос: "What types of modules does this package expose? | Какие типы модулей делает выставить этот пакет?". Варианты: ⬡ amd,  ⬡ es6,  ⬡ globals,  ⬡ node,  ⬡ yui. Если вы не знаете что это и не желаете заморачиваться - выбирайте ⬡ globals. Эта опция (moduleType) указывает на тип модуля. И полезна только, если вы планируете опубликовать этот модуль.

Main file

Массив или строка, указывает на основной файл пакета. Этот параметр нужен для таких инструментов как Grunt, Gulp, Brunch.

Сохранение зависимостей

Если на этапе инициализации, на вопрос: "Set currently installed components as dependencies? / Добавить установленные модули в зависимости?", вы ответите утвердительно - все установленные модули будут сохранены в файле bower.json в секции dependencies.

Повторная инициализация

При повторном запуске инициализации, Bower будет перечитывать существующий файл bower.json.

Файл конфигурации .bowerrc

Я перенес этот параграф в начало, поскольку дефолтное имя каталога с зависимостями (bower_components/) мозолит глаза. И скорее всего, вы захотите переименовать этот каталог и, возможно, положить его куда-то public/assets/. 

{
  "directory" : "assets/vendors",
  "json" : "bower.json",
  "endpoint" : "https://bower.herokuapp.com"
}

directory - каталог для загрузки пакетов. По умолчанию bower_components/, можете указать другое имя для каталога с библиотеками, например vendors/ или libraries/ (каталог будет создан автоматически).

json - путь к файлу настроек bower.json

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

Официальная документация: http://bower.io/docs/api/#install

Загрузка всех пакетов указанных в зависимостях конфиг файла bower.json:

bower install

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

bower install jquery#2.0.3      ## имя пакета с версией
bower install messenger#~1.4    ## то же самое
bower install components/jquery ## относительный путь к GitHub репозиторию
bower install https://github.com/dragosu/jquery-aciTree.git#~4.4.0  ## полный путь к репе
bower install http://site.com/some_file.(js|css|zip|tar)            ## ссылка на js файл

Установка в указанный каталог (jQuery будет установлен в каталог <directory>/jquery-2.1.1):

bower install -S jquery-2.1.1=jquery#2.1.1

Установка и добавление пакета в зависимости в bower.json:

bower install -S messenger
bower install -S angular#1.2.23

Для подключения пакета на страницу вы можете "спросить" у Bower какие файлы необходимо загрузить:

bower list -p

После чего вручную подключить эти файлы на страницу.

Примечание

Bower обычно отображает минифицированные скрипты и стили каждого пакета. Но в dev окружении вам, скорее всего, потребуются исходные файлы, чтобы вы могли более гибко настроить задачи конкатенации и минификации. Увы, придется искать исходники вручную.

Установка пакета из локального кеша:

bower install jquery --offline

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

Найти пакеты в репозитории по названию:

bower search bootstrap

Вывести список локально установленных пакетов:

bower list

Просмотр пакетов в локальном кеше:

bower cache list

Информация о пакете

Вывести информацию о пакете (описание, версии, зависимости, URL):

bower info messenger

Показать ссылку на репозиторий пакета:

bower lookup restangular

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

При обновлении, Bower загрузит версию пакета, которая указана в списке зависимостей bower.json. Для скачивания новой версии - используйте install. Пример обновления пакета:

bower update -S bootstrap#3.1.1

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

Удаление локального пакета:

bower uninstall jquery

Файл зависимостей - bower.json

Пример файла конфигурации зависимостей:

{
  "name": "bower",
  "version": "0.0.1",
  "authors": [
    "Stanislav Butsenko <svbutsenko@gmail.com>"
  ],
  "license": "MIT",
  "private": true,   // не публиковать пакет, оставить приватным
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "jquery": "~2.0.3",
    "bootstrap": "https://raw.github.com/twbs/bootstrap/v2.0.2/docs/assets/bootstrap.zip",
    "components-font-awesome": "3.1.0"
  }
}

Подключение зависимостей

Для подключения зависимых пакетов bower создает карту зависимостей (source map). По этой карте можно создать билд с помощью сторонних утилит (build tools). Для генерации карты зависимостей выполните:

bower list --path > ./map.json
# или
bower list --json

Регистрация нового пакета

Вы можете добавить свой пакет в репозиторий Bower. Для этого есть команда:

bower register my-package-name git://github.com/vendor/package-name

Вопросы

Q: Как исключить не нужные файлы из пакетов?


#package manager, #dependency, #frontend

категория: JavaScript