Twitter が先日リリースした、Javascript や CSSなどのフロントエンド向けパッケージマネージャ Bower (http://twitter.github.com/bower/) についての簡単な下調べを行ったときのメモ。
■ Git リポジトリを指定しての導入
bower install コマンドで指定できるのは名前だけじゃなくて、git リポジトリの URL を指定することができる。
$ bower install git://github.com/kumatch/asyncall.git
末尾にシャープ付きでバージョンを指定すると、ちゃんと git タグのバージョンが使われる（シェルによっては # をバックスラッシュでエスケープすること）。みんなでちゃんとバージョン付けをしよう。
$ bower install git://github.com/kumatch/asyncall.git#0.1.1
これら方法で導入したパッケージも、bower update で最新のものに更新されることを確認した。
■ component.jsonを使ってのパッケージ管理
component.json ファイルを自身のプロジェクトリポジトリに置いて、そのプロジェクト内で利用しているパッケージ群を定義することができる。
{
"dependencies": {
"jquery": "~1.7.2",
"asyncall": "git://github.com/kumatch/asyncall.git"
}
}
component.json のあるディレクトリ（あるいは bower 側で辿ることができる場所。マニュアル参照。）で bower install を実行すれば、定義しているパッケージ群を一気に導入できる。
先ほどのように、git リポジトリ URL でのバージョン指定も OK。
注意点としては、dependencies に定義するキーの値は、導入パッケージ側の "name" 要素で指定されている名前とあわせること。そうでないと、導入後の list コマンドでおかしなことになった。
■ bower で導入されることを想定しているコンポーネントの依存性定義
例として、次のような component.json を含んだ git リポジトリがあるとする。
（ここでは git://github.com/kumatch/bower-samples-nop.git とする）
{
"name": "sampels-nop",
"version": "0.1.0",
"main": "./lib/index.js",
"dependencies": {
"asyncall": "git://github.com/kumatch/asyncall.git"
}
}
一方、自身のプロジェクト側の component.json で、このパッケージを利用するよう定義。
{
"dependencies": {
"sampels-nop": "git://github.com/kumatch/bower-samples-nop.git"
}
}
bower install を実行すると、samples-nop パッケージと一緒に、依存している asyncall が導入される。
$ bower list
/path/to/bower-test
├── asyncall#0.1.2
└─┬ sampels-nop#0.1.0
└── asyncall#0.1.2
$ bower list --paths
{
"asyncall": "components/asyncall/asyncall-0.1.2.min.js",
"sampels-nop": "components/sampels-nop/lib/index.js"
}
bower-samples-nop.git リポジトリの component.json を package.json としていても、問題なく（依存性を解決して）導入することができた。従って、npm パッケージとして用意されていて、かつブラウザでも利用可能なもの (Underscore.js とか) は普通に依存パッケージとして指定することができて、導入時にも問題なく解決される。
■ 導入パッケージのエントリポイントをスクリプトで得る
次のようなコードで paths にオブジェクトで受け取ることができた。まだ何も試していないけども、色々と自動化したいならば必要になってくると思う。
var bower = require('bower');
bower.commands.list({ paths: true }).on('data', function (paths) {
// console.log(paths);
// …
});