node.jsのいろいろなモジュール15 – bowerでクライアントのライブラリを管理

ライブラリ管理がめんどい

クライアント側で使用するサードパーティ製ライブラリ管理を面倒に感じたことはありませんか？
毎回公式サイトから持ってきてしてディレクトリに置いたり、バージョンアップしたらまた公式サイトから持ってきて・・・
そんな管理が煩わしいとおもっている人に、今回はクライアント側パッケージ管理ツールを紹介します。

bowerとは?

bowerとは、Twitterが公開しているクライアントサイド用パッケージマネージャです。
サーバサイドではnode.jsのnpmでパッケージ管理をしますが、それのクライアントサイド版ですね。
jqueryやbackbone.jsなどのライブラリを簡単にインストールでき、依存関係も管理できます。

bowerはnode.jsのモジュールとして提供されており、npmをつかってインストールします。
ではbowerをインストールし、比較的よく使うコマンドをいくつか使ってみましょう。

環境構築

今回使用した動作環境は以下のとおりです。

• OS : MacOS X 10.7.4
• Node.js : v0.8.15
• npm : 1.1.66

適当なディレクトリを作成し、そこでnpmを使用してインストールしましょう。
bowerコマンドを使用するために-gオプションをつけてインストールします。

% mkdir bower-sample
% cd bower-sample
% npm install -g bower 

bowerのコマンドをいくつか使ってみる

インストールできたらコマンドを入力してみましょう。bower helpと入力してヘルプが表示されればインストールは問題ありません。

% bower help
Usage:

    bower <command> <options>
・
・
 

なお、bower help ＜コマンド名＞　とすればそのコマンドの詳細ヘルプを確認することができます。

install/update/uninstall

パッケージをインストールするにはinstallコマンドを使用します。

bower install ＜パッケージ名＞ ...

＜パッケージ名＞の後ろに#＜バージョン＞を指定すれば、特定のバージョンのライブラリをインストールできます。
どのバージョンが指定できるかはbower info ＜パッケージ名＞で確認してください。
また、オプションとして--forceオプションを使用することができます。このオプションは、
ローカルディスク上に、あるライブラリが依存するライブラリが存在している場合でも、リモートからリソースを取得を強制するコマンドです。
これ以外のオプションについてはhelpで確認してください。

では、installコマンドをつかってjqueryをインストールしてみましょう。

% bower install jquery
bower cloning git://github.com/components/jquery.git
bower cached git://github.com/components/jquery.git
・
・

% ls components/    
jquery

components/jqueryディレクトリができて、その中に各種jsファイルがあります。
component.jsonは、パッケージの設定ファイルみたいなものみたいです。バージョンとか依存ファイルが定義してあります。

ライブラリのバージョンアップをしたい場合、updateコマンドを使用します。
bower update ＜パッケージ名＞
なお、パッケージ名を指定しなければ管理しているライブラリすべてがupdateされます。

% bower update jquery
bower cloning git://github.com/components/jquery.git
bower cached git://github.com/components/jquery.git
・
・

パッケージのアンインストールも簡単で、bower uninstall ＜パッケージ名＞　とすればOKです。

list/ls

インストールしているパッケージとその依存関係をみることができます。lsとlistは同じ動作です。

% bower ls
bower discover Please wait while newer package versions are being discovered
/Users/syuta/srcs/nodeapps/bower
└── jquery#1.9.0

info/search

infoコマンドを使用すると、指定したパッケージのバージョン情報一覧を表示します。
このVersionsで表示されたバージョンを、「bower install #＜バージョン＞」とすれば、そのバージョンをインストールできます。

% bower info jquery
jquery 

  Versions:
    - 1.9.0
    - 1.8.3
    - 1.8.2
・
・

seachコマンドを使えば、bowerでインストール可能なライブラリを検索することができます。

% bower search spine                          
Search results:

  - spine git://github.com/maccman/spine.git
  - spine-mobile git://github.com/spine/spine.mobile
  - spine.mobile git://github.com/maccman/spine.mobile

自分のプロジェクト用にcomponent.jsonを使う

node.jsでpackge.jsonを使うように、component.jsonファイルを使えばどんな環境でも必要なライブラリを揃えることができます。
適当なディレクトリを作り、そこにcomponent.jsonという名前でファイルを作成しましょう。

% mkdir sampleAppDir
% cd sampleAppDir
% vi component.json

component.jsonにはインストールしたいライブラリを記述します。今回はjqueryとunderscoreをインストールします。
dependenciesにインストールしたいライブラリを記述していきます。
dependenciesのキーにライブラリ名、値にバージョンを記述するオブジェクトリテラルになっています。
例のように、バージョンがnullになっている場合は最新版をインストールします。

{
  "name": "MyBowerApp",
  "version": "0.1",
  "dependencies": {
    "jquery": "1.8.3",
    "underscore":null
  }
}

component.jsonの記述ができたら、bowerで必要ライブラリをインストールしましょう。

% bower install 
bower cloning git://github.com/documentcloud/underscore.git
bower fetching underscore
・
・

これで必要ライブラリのインストールがコマンド１つで完了しました。

まとめ

今回はクライアントサイドのパッケージマネージャである、bowerを紹介しました。
サーバサイドはnpm、クライアントサイドはbowerを使えば、手間なくライブラリ管理ができますね。

参考サイトなど

• bower: http://twitter.github.com/bower/