JSライブラリの管理ツールbowerを使ってみた

最近のアップデートでパッケージのインストール先を変えられるようになったので、GAEを使ったプロジェクトでもbowerを適用できるようになりました。

そこで、今回はbowerをインストールしてパッケージを入れるところと設定ファイルを使って挙動を変更するところについて書きます。

インストール

$ npm --version #=> 1.1.66
$ node --version #=> v0.8.15

$ npm install -g bower

2013/2/12時点でバージョン0.7.0がインストールされました。

ライブラリを入れてみる

$ bower install jquery 
bower cloning git://github.com/components/jquery.git
bower cached git://github.com/components/jquery.git
bower fetching jquery
bower checking out jquery#1.9.1
bower copying /Users/grapswiz/.bower/cache/jquery/cf68c4c4e7507c8d20fee7b5f26709d9
bower installing jquery#1.9.1

デフォルトではbower実行時のカレントディレクトリのcomponents以下にインストールされます。
インストール場所を変更する場合は後述する設定ファイルで指定します。

バージョンを指定する場合

$ bower install jquery#1.9.0
bower cloning git://github.com/components/jquery.git
bower cached git://github.com/components/jquery.git
bower fetching jquery
bower checking out jquery#1.9.0
bower copying /Users/grapswiz/.bower/cache/jquery/cf68c4c4e7507c8d20fee7b5f26709d9
bower installing jquery#1.9.0

そのライブラリにどんなバージョンがあるかは

$ bower info ライブラリ名

で確認できます。

設定ファイルから入れる

後述するcomponent.jsonのdependenciesに指定したライブラリを

$ bower install

でインストールできます。

どんなライブラリがbowerにはあるの？

http://sindresorhus.com/bower-components/ を参照。
検索は、

$ bower search ほげほげ

でできます。

設定ファイルを書く

bowerの設定は2つのファイルで行います。.bowerrcとcomponent.jsonです。

.bowerrc

{
  "directory" : "components",
  "json"      : "component.json",
  "endpoint"  : "https://bower.herokuapp.com"
}

• directory: ライブラリをインストールする場所の指定
• json: 参照する設定ファイルの名前
• endpoint: 参照するレポジトリの場所。記述しない場合は https://bower.herokuapp.com が指定される。

component.json

{
  "name": "myProject",
  "version": "1.0.0",
  "dependencies": {
    "jquery": "~1.7.2"
  }
}

• name: プロジェクト名
• version: バージョン
• dependencies: 依存しているbowerのパッケージ。

$ bower install

でdependenciesに指定したパッケージをインストールできる。

サンプルプロジェクト

https://github.com/grapswiz/bower-sample
bowerを使ってjqueryを読み込むサンプルをgithubに置きました。

参考資料

https://github.com/twitter/bower
http://sindresorhus.com/bower-components/