Если вы не живёте в норе, то хорошо осведомлены о том, что JavaScript вращает всё вокруг нас. Многие из удивительных идей, что я обнаружил в экосистеме Rails, теперь вырвались в космос JavaScript и способствуют распространению замечательных продуктов. Три столпа: Yeoman, Bower и Grunt.
Проблема, которую мне нужно решить, следующая — какой лучший способ получить код некоторой библиотеки с Github и сделать его легко доступным для пользователей без клонирования проекта? Потому что это довольно отстало, не так ли?
Генераторы Yeoman
Первоначально я наткнулся на generator-sass-boilerplate, «Генератор Yeoman для быстрого скаффолдинга из стилей Sass». Это очень интересный подход для создания сложной библиотеки и позволяет пользователю настраивать установку. Но для простой библиотеки кода, которой, возможно, требуются только несколько функций и примесей, данный метод слишком накладной.
Bower — вот ответ
Недавно я наткнулся на новые посты, которые на самом деле рассказывают что есть Bower и что он лучше всего. И меня осенило, что это и есть ответ!
Для тех, кто не в курсе, Bower является чрезвычайно простым решением для управления фронтенд-пакетами.
Он предлагает общее нестрогое решение проблемы управления фронтенд-пакетами, в то время раскрывая модель зависимостей пакета через API, который может использоваться более своевольным набором сборки.
Красота Bower в его простоте. У Bower есть реестр, но он не на 100% необходим. Общая команда такая: bower install <пакет>, где <пакет> может указывать на огромное число вариантов, что позволяет чрезвычайно просто делиться некоторым кодом. Прекрасно!
Придерживаясь темы «чрезвычайно просто» вы можете с помощью Bower легко вытащить хранилище в ваш проект без его клонирования. Даже если у него нет файла bower.json.
Например Stipe, библиотека для Compass которую я написал, не известна Bower вообще.
$ bower install git://github.com/Toadstool-Stipe/stipe.git
Запустите эту команду в любой папке и вы вытяните всё хранилище без истории Github. Это само по себе довольно интересно.
Начало работы с Bower
Начать довольно просто. Предполагая, что Node и npm уже установлен, выполните:
$ npm install -g bower
Установка пакета Bower
Я не буду здесь вдаваться в мельчайшие подробности, но 99% времени вам просто нужно выполнить:
$ bower install <пакет>
Как указано выше, существуют альтернативные методы установки, но основным решением является файл bower.json в хранилище и его регистрация в Bower.
Если в вашем проекте есть файл bower.json, о котором пойдёт речь в следующем разделе, вы можете добавить флаг --save при установке и это добавит библиотеку в качестве зависимости в ваш проект. Мило.
Когда вы распространяете проект, то пользователю, который его клонирует, достаточно только запустить $ bower install и он будет тянуть все внешние ресурсы. Красота!
Коммит или не коммит!?
Эта новая система создания и распространения ресурсов поднимает интересный вопрос — нужно ли коммитить все пакеты Bower или нет? В мире Ruby на самом деле Gem не является частью проекта, но связан с проектом и никогда не коммитится в систему контроля версий проекта. В этом новом JavaScript-мире зависимые пакеты Node и Bower являются ссылками в манифесте, подобно Gemfile в Ruby, но в действительности установлены в корневую папку проекта.
Существует целая дискуссия по этому вопросу. Я смотрю на это так — когда вы устанавливаете библиотеку Bower, вы оставляете её как зависимость или вносите модификации?
Выбор остается за вами, аргументы сильны у обеих сторон. В ситуации, когда вы на самом деле выполняете форк установленного кода, ответ довольно очевиден, следует ли коммитить в проект или нужен форк зависимости.
Создание нового пакета Bower
Создать новый пакет Bower снова на самом деле просто.
$ bower init
В консоли это инициализирует ряд вопросов, ответы на которые будут включены в новый созданный файл bower.json. Пишите что пожелаете, но всё что на самом деле нужно, это следующее:
{
"name": "your-project",
"version": "0.1.0"
}
И это всё на самом деле. Вы только что создали свою первую библиотеку ресурсов Bower. Теперь двигайтесь вперед и стройте — свои ресурсы, документацию и т. д., ваш пакет готов в любое время!
Для простого тестирования вспомните трюк $ bower install git://github.com/...? Запустите это с новым хранилищем и увидите, как оно устанавливается.
Будьте внимательны на этом этапе и с содержимым пакета. На мой взгляд, я вижу Bower как отличный способ для распространения небольших, специальных библиотек кода. Когда я тяну пакет через Bower, то действительно хочу всю документацию, тесты, демонстрационные ресурсы и др. В качестве примера я собираюсь взять Bourbon, для этого выполните:
$ bower install bourbon
Запустив эту установку вы получите всё хранилище. Мне не нужно хранилище целиком, всё, что мне действительно требуется это папка dist/. Чтобы решить эту проблему, другой разработчик сделал форк Bourbon и создал новое хранилище с названием bower-bourbon:
$ bower install bower-bourbon
Выполнив эту установку вы на деле получите только то, что находится в папке dist/. Но эти форки заслуживают доверия?
ОБНОВЛЕНИЕ. До моего внимания довели, что при установке тянется версия Bourbon 3.2 Beta и она, кажется, не полностью функциональна. В этом разделе я не намерен говорить «плохой Bourbon», а просто показываю, что в некоторых случаях с помощью Bower вы получите больше библиотек, чем действительно хотите.
Регистрация Bower
После того, как пакет готов к выпуску, зарегистрируйте его в Bower. Критерии довольно простые:
- убедитесь, что ваше хранилище содержит файл bower.json;
- вы должны использовать семантическую версионность;
- ваш пакет должен быть доступен через Git, например, на Github.
После того, как всё это у вас есть, выполните следующую команду с новым именем пакета и хранилищем Git:
$ bower register <имя пакета> <хранилище git>
Регистрация проходит безболезненно. После того, как вы получите зелёный свет на всё, сделайте проверку и выполните $ bower install <имя пакета>.
Bower и Sass
Bower и Sass — это библиотеки, которые удивительно сочетаются друг с другом. Есть небольшие хранилища по всему Github на Ruby Gem/Compass, но их сложность бывает слишком накладной. Вы должны сделать либо форк, либо клон или не дай бог, скопировать и вставить код в свой проект. Что? Мы не цивилизованные?
В мире Ruby разработчики привыкли к тому, что Gem и Compass установлены в безопасном неприкасаемом месте. Новый Gem добавляется в Gemfile и мы просто ссылаемся на библиотеку в проекте.
Неприкасаемое место является разочарованием многих разработчиков. Импорт библиотеки Sass, над которой на самом деле нет контроля или которую невозможно модифицировать, может сделать вывод CSS на практике очень досадным.
В новом мире JavaScript, библиотека добавляется в манифест bower.json или просто устанавливается, но вместо того, чтобы находиться в неопределённом месте, устанавливается в корень проекта. Это сохраняет всё простым с точки зрения установки, но означает, что Sass импортируется в относительную папку. Небольшая разница, но отличается от того, к чему мы привыкли.
Итак, как выглядит пакет Sass Bower? Давайте возьмём простой проект, который я создал с именем sass-icon-fonts. Этот пакет является просто парой примесей, которые позволяет разработчику легко создавать набор правил @font-face, а также быстро генерировать набор правил со шрифтовыми иконками. Мини-библиотека поставляется с инструкциями и очень простым API.
Теперь представив что вы создаёте Node-проект и хотите использовать этот пакет в качестве ресурса, выполните:
$ bower install sass-icon-fonts --save
Эта команда установит пакет и добавит зависимость в ваш файл bower.json. Создайте в корне проекта папку sass/, а внутри неё файл application.scss. В корне также находится папка bower_components. Для доступа к вашему файлу application.scss вам нужно импортировать относительный путь к библиотеке, как показано в следующей строке:
@import "../bower_components/sass-icon-fonts/_ico-font.scss";
Предыдущий пример работает и я считаю его приемлемым, но не замечательным. Роясь дальше в Grint-Sass API я обнаружил функцию includePaths. Она позволяет вам установить путь импорта.
options: {
includePaths: [
'./bower_components/bower-bourbon'
]
}
Теперь у нас есть это в Gruntfile.js и вы можете легко ссылаться на основной файл манифеста библиотеки через простой импорт Sass, например, так:
@import "bourbon";
Bower в npm
Одна из вещей, которые я нахожу немного раздражающей при использовании Bower — это то, что я должен выполнять различные команды при инициализации нового проекта. У меня уже есть npm, почему бы просто не связать их вместе?
Да, да, вы можете. В файле package.json просто расширьте объект scripts и передайте команду bower install. Вот почему я действительно люблю эту штуку!
"scripts": {
"install": "bower install"
}
Теперь, при запуске npm install вы не только установите все пакеты Node, но и заодно пакеты Bower. Прекрасно!
Bower за фаерволом
Если вы оказались за фаерволом, который не разрешает протокол git://, это можно исправить. Для начала я предлагаю сделать вручную клон с использованием протокола https://, чтобы убедиться, что это действительно проблема. Если протокол https:// работает, то вы можете сделать следующее обновление:
git config --global url."https://"
Спасибо Stack Overflow!
Резюме
Когда я говорю, что хочу использовать Bower для всего, я подразумеваю именно это. Теперь освоившись с Bower я рассматриваю простое управления пакетами в совершенно новом свете и надеюсь, что вы сделаете то же самое.
Не нужны больше форки, клонирование, удаление папки .git/, достаточно просто включить библиотеку в проект. Я смотрю на создание модулей Sass также в совершенно новом свете. Не то, чтобы Compass был сложен, но Bower освобождает меня от нескольких зависимостей. А это было реальной проблемой во многих проектах.