Зачем нужен менеджер пакетов, или почему именно Bower

Все материалы сюжета:

• Зачем нужен менеджер пакетов, или почему именно Bower
• Frontend - rак все поменялось за последние 15 лет
• Клиентский JavaScript тогда и теперь

Надоело ходить на сайты JavaScript-библиотек и качать архивы каждый раз, как надо добавить на сайт очередной jQuery-плагин? Бовер сделает все сам.

Менеджеры пакетов упрощают установку и обновление зависимостей проекта, то есть сторонних библиотек, которые он использует: jQuery, Fotorama, все, что используется на твоем сайте и написано не тобой.

Хождение по сайтам библиотек, скачивание и распаковка архивов, копирование файлов в проект — все это заменяется парой команд в терминале.

У многих языков программирования есть стандартные менеджеры пакетов, которыми разработчики пользуются для установки всех библиотек: gem у руби, pip у питона и другие. У серверного яваскрипта есть npm (почему он не подходит для клиентского — дальше), а у клиентского яваскрипта до недавнего времени ничего не было. Было множество разных пакетных менеджеров (Jam, Component, Volo, Ender), но большинство из них так и не стали популярными, а от менеджера пакетов, которым не поставишь нужных библиотек, толку мало.

Бовер — не стандартный менеджер пакетов для клиентского яваскрипта, но самый популярный: сейчас там больше 11 тысяч пакетов.

Бовер не навязывает пользователю свою систему сборки, разработчику пакетов — метод подключения библиотеки (AMD, CommonJS и другие). Все, что делает Бовер, — устанавливает нужные проекту пакеты подходящих версий вместе с их зависимостями. Другими словами: просто загружает файлы нужных библиотек и все, что нужно для их работы, в специальную папку. Остальное остается на усмотрение разработчика.

Работа с пакетами

Попробуем что-нибудь установить, например jQuery:

bower install --save jquery

Флаг --save говорит Боверу, что он должен сохранить имя пакета и его версию в специальный файл со списком всех зависимостей проекта — bower.json. У нас такого файла еще нет, о чем и говорит строчка «No bower.json file to save to, use bower init to create one» в логе.

Создадим bower.json:

bower init

Бовер будет задавать много вопросов, но до тех пор, пока мы не захотим опубликовать свой пакет, ответы на большинство из них не имеют значения, можно просто нажимать Enter.

На вопрос «set currently installed components as dependencies?» нужно ответить «Yes» — все ранее установленные компоненты (в нашем случае это jQuery) автоматически попадут в созданный JSON-файл. А на вопрос «would you like to mark this package as private which prevents it from being accidentally published to the registry?» — тоже «Yes», если вы не делаете библиотеку, которую потом будете публиковать в Бовере.

Поставим еще несколько пакетов (можно устанавливать несколько пакетов сразу):

bower install --save social-likes jquery-icheck fotorama
bower list
bower check-new     Checking for new versions of 
the project dependencies..
bowertest#0.0.0 /Users/admin/bowertest
├── jquery#2.1.0 (2.1.1-beta1 available)
├─┬ jquery-icheck#1.0.2
│ └── jquery#2.1.0 (2.1.1-beta1 available)
└─┬ social-likes#3.0.2
  └── jquery#2.1.0

Команда bower list покажет список всех установленных пакетов. Ты увидишь, что все пакеты зависят от jQuery и что Бовер смог найти удовлетворяющую всех версию jQuery — 2.1.0. Каждый пакет устанавливается в свою папку внутри директории bower_components, вложенных пакетов нет, jQuery встречается только один раз. В корне проекта лежит созданный нами bower.json, но теперь там перечислены уже все пакеты, которые показывает bower list, а не только jQuery.

Для удаления пакетов используется команда bower uninstall --save packageName.

Развертывание проекта

Есть два подхода к развертыванию проектов:

1. В репозиторий добавляется только файл-манифест, и все пакеты устанавливаются во время развертывания проекта. Так в репозитории не хранится ничего лишнего, но, если во время развертывания проекта упадет гитхаб или другой сервер, с которого устанавливаются пакеты, будут проблемы.
2. В репозиторий добавляется и bower.json, и папка bower_components. Так развертывание не зависит от внешних серверов, но репозиторий раздувается десятками лишних файлов.

Семантические версии (semver)

Semver — это, во-первых, подход к версионированию библиотек: формат МАЖОРНАЯ.МИНОРНАЯ.ПАТЧ и правила, по которым следует увеличивать то или иное число. А во-вторых — это способ описания требуемых версий зависимостей, который используют Бовер и npm.

При установке с флагом --save версии пакетов добавляются в bower.json в виде ~1.0.1. Тильда в начале говорит о том, что при установке будет выбрана версия 1.0.1 или с большим последним числом (ПАТЧ), если она есть. Таким образом, будет установлена версия с последними исправлениями ошибок, но полностью совместимая с той, что указана вbower.json.

Обновление зависимостей

В Бовере есть команда bower update, но она обновляет пакеты с учетом требований, описанных в bower.json. Например, если там требуется jQuery ~2.0.0, то он сможет обновить его, например, до 2.0.9, но 2.1.0 уже не поставит, потому что он не соответствует формуле ~2.0.0.

Для обновления пакетов (и bower.json) до действительно последних версий можно воспользоваться bower-update. Устанавливаем:

npm install -g bower-update

Запускаем:

bower-update

— и вуаля!

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

Есть два способа найти нужный пакет: гиковский и обычный. Гиковский:

bower search jquery
Search results:
  jquery git://github.com/jquery/jquery.git
  jquery-ui git://github.com/components/jqueryui
    ...

Обычный: открыть в браузере bower.io/search/.

Автоматическая сборка

Бовер перекладывает проблемы сборки установленных пакетов на плечи разработчика.

Самый легкий способ — просто склеить JS-файлы Грантом, Галпом или любой другой системой сборки, которой ты пользуешься.

Я пользуюсь Грантом, поэтому расскажу, как склеивать пакеты им. О том, как пользоваться Грантом, была большая статья в июльском номере прошлого года, поэтому покажу сразу конфиг плагина grunt-contrib-concat:

concat: {
  main: {
    src: [
      'bower_components/jquery/jquery.min.js',
      'bower_components/fotorama/….js',
      'bower_components/jquery-icheck/….js',
      'bower_components/social-likes/
       social-likes.min.js',
      // Скрипты твоего сайта
      'scripts/*.js'
      ],
      dest: 'build/scripts.js'
   }
}

У этого способа есть много недостатков: тебе нужно смотреть имена файлов для каждого пакета и следить, чтобы файлы собирались в правильном порядке (например, jQuery должен быть выше, чем скрипты, зависящие от него). Плагин grunt-bower-concat может делать это сам: он автоматически склеивает все установленные зависимости в правильном порядке в один файл:

bower_concat: {
  all: {
    // Склеенный файл
    dest: 'build/_bower.js',
    // Пакеты, которые нужно исключить 
    // из сборки
    exclude: [ 
      // Если jQuery подключается 
      // с CDN Гугла
      'jquery',
      // Если подключаем скрипты в конце 
      // страницы; Modernizr нужно 
      // подключать в <head>
      'modernizr'
    ]
  }
},

concat: {
  main: {
    src: [
      'build/_bower.js',
      // Скрипты твоего сайта
      'scripts/*.js'
      ],
    dest: 'build/scripts.js'
  }
}