Создание и поддержка собственных пакетов Bower

| Суббота, 25 апреля, 2015

Метки: Bower, Javascript Комментарии: 0

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

Два ключа для понимания

Перед тем, как начать, необходимо привести два фундаментальных ключа, для понимания, как эффективно распространять свои пакеты через Bower:

1. Bower спроектирован и работает поверх Git. Вы не можете поделится своей библиотекой, если она не размещена в каком нибудь git-хранилище, например, в GitHub, Bitbucket или в любом другом git-провайдере, это может быть даже свой собственный. Фактически, когда вы регистрируете пакет в Bower, вы указываете, откуда его можно будет установить, когда разработчики делают запрос на его установку. Также вы указываете содержимое своего хранилища которое вы хотите доставить потребителю. В качестве примера будем использовать хранилище GitHub.
2. Версии библиотек - это просто git-тэги (git tags). Подробнее об этом рассказано дальше, но единственное, что надо запомнить, что делая новый "релиз" вашего пакета, нужно просто прописать тэг для изменений, которые вы отправили в свое git-хранилище.

Содержимое пакетов

Первое, что необходимо сделать для работы с Bower - это сконфигурировать пакет. Для этого нужно добавить в проект файл bower.json. Простейший вид конфигурационного файла, может быть таким:

{ 
    "name": "my-package-name", 
    "version": "0.0.1" 
} 

На самом деле, даже версия здесь не обязательна. Так как во время установки версия будет браться из git-тегов. Но для читабельности, версия тут пригодится. Это очень упрощенный вид, и параметров для настройки этого файла имеется достаточно. Например, у вас есть какие-то вспомогательные внутренние файлы, которые не предназначены для конечного потребителя. Для их блокирования можно прописать атрибут ignore, содержащий массив файлов, который говорит Bower, что указанные файлы не надо устанавливать клиенту.

Допустим, вы создали пакет из одного файла my-module.js, который размещен в папке dist, имеет минифицированную версию my-module.min.js, а также использует другую библиотеку, например jQuery. Это может выглядеть так:

{ 
    "name": "my-package-name", 
    "version": "0.0.1", 
    "main":  "dist/my-module.js", 
    "ignore": [ 
        ".idea",  
        ".gitignore",  
        ".jsscrc",   
        ".jshintrc", 
        "package.json", 
        "gulpfile.js", 
        "karma.conf.js" 
    ], 
    "dependencies": { 
        "jquery": ">=2.1.3" 
        "bootstrap": ">=3.3.2", 
    } 
} 

Как видно из примера, для распространения запрещено все, кроме папки dist. И указана зависимость пакета от библиотеки jQuery и фреймворка Bootstrap. Bower будет устанавливать или обновлять эти пакеты, если они не были установлены прежде. Это та самая функциональность, которая делает Bower очень удобным. Не нужно скачивать и включать сторонние пакеты в свою библиотеку, нужно просто указать зависимость на них. Они такие же Bower пакеты и установятся автоматически должным образом.

Итак, все необходимые приготовления сделаны. Библиотека содержит содержит bower.json и находится в git-репозитории. Осталось только зарегистрировать этот пакет.

Регистрация своего пакета через Bower

Основная работа сделана. Регистрация пакета довольно простая вещь. Единственная вещь, которую нужно помнить перед регистрацией - это прописать тэг с версией.

Указываем тэг:

git tag -a v0.0.1 -m "Version 0.0.1"

Отправляем его в хранилище:

git push --tags

Если этого не сделать, то пользователи будут получать вашу библиотеку без указания версии, даже если она указана в конфигурационном файле bower.json:

...
"dependencies": [ 
    "my-package-name": '"*"  // !!! забыли прописать тэг с версией 
] 
...

Теперь точно все готово, и осталось только запустить команду Bower для регистрации пакета:

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

Как и было замечено ранее, git-репозиторий может быть где угодно, не обязательно GitHub.

Библиотека зарегистрирована и нам нужно проверить это. Запустим команду:

bower info my-package-name

Мы должны получить примерно такую информацию:

bower my-package-name#*        cached git://github.com/my-name/my-repository.git#0.0.1 

bower my-package-name#*      validate 0.0.1 against git://github.com/my-name/my-repository.git#*

{ 
    name: 'my-package-name', 
    version: '0.0.1', 
    main:  "dist/my-module.js", 
    license: 'MIT' 
} 

Available versions: 

   - 0.0.1 

You can request info for a specific version with 'bower info my-package-name#' 

Если вы увидели нечто похожее, то библиотека успешно зарегистрирована и доступна для установки через Bower всем разработчиками в мире.

Обновление и поддержка

Так как нет ничего идеального и никто не пишет код без изъянов, то несомненно возникнет ситуация, когда нужно будет внести поправки в библиотеку и обновить регистрационную информацию пакета для Bower.

И это еще одна вещь, которая делает Bower максимально простым. Так Bower работает с гит-репозиториями, то он получает всю информацию только из них. Процесс обновления пакета состоит из следующих трех шагов:

1. Сделайте необходимые поправки и дополнения в библиотеку.
2. Обновите файл bower.json актуальной информацией (версия, устанавливаемые файлы, зависимости и т.п.)
3. Отправьте изменения и тэг с версией в репозиторий.

На этом обновление завершено. Как упоминалось выше, Bower опирается на информацию, находящуюся исключительно в репозитории, поэтому никаких команд Bower для обновления пакета, выполнять не надо.

Итак, суммируя все вышеизложенное, нужно просто внести изменения в код, обновить версию в bower, json и отправить изменения и новый тэг с версией в репозиторий.

# commit your changes  
git commit -am "My new changes"  

# tag the commit  
git tag -a v0.0.2 -m "Release version 0.0.2"  

# push to GitHub  
git push origin master --tags

Еще одно полезное применение

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

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

И тогда вы применяете этот прием. Берете стороннюю библиотеку, вносите правки, если надо. Делаете из нее свой bower-пакет, сохраняете в свое git-хранилище, регистрируете свой bower-пакет и подключаете в свое приложение. Gulp успешно обработает эту библиотеку, как и все остальные.