Bower で JavaScript パッケージを管理する

Bower とは？

BOWER: A package manager for the web

Twitter 製の JavaScript パッケージ管理ライブラリ。Ruby の Gem, PHP の Composer みたいなもの。

プロジェクトで使用する JS ライブラリとバージョンをファイルに記述して管理できるため、バージョン管理が容易になります。

インストール

CentOS 6 でインストールする手順です。

  1. node.js をインストールする。
    • EPEL が使えれば yum install nodejs で一発。
  2. npm をインストールする。
    • パッケージが公開されていないので、ソースからインストールまたは curl http://npmjs.org/install.sh | sh (Fancy install) で。
  3. npm で bower をインストールする。
    • sudo npm install -g bower で終わり。

使い方

プロジェクトのルートに bower.json を作り、パッケージ情報を記述し、bower install を叩くのが基本です。

# カレントディレクトリの bower.json を参照してパッケージをインストールする
bower install

# パッケージを指定してインストールする
bower install <package>

# git にタグ付けされたバージョンを元にインストールする
bower install <package>#<version>

bower.json のサンプルは下記の通り。

{
  "name": "wpn"
  , "version": "1.0.0"
  , "main": "app/webroot/js/main.js"
  , "ignore": [
    ".jshintrc"
    ,"**/*.txt"
  ]
  , "dependencies": {
    "backbone": "1.0.0"
    , "underscore": "1.4.4"
    , "jquery": "< 2.0.0"
    , "jquery-mousewheel": "latest"
    , "snap": "git://github.com/jakiestfu/Snap.js.git"
  }
}

ごらんのように、Bower リポジトリに登録されているパッケージは柔軟なバージョン指定ができます。

登録されていないパッケージも、GitHub の URL を直接指定することで管理ができます。

好きなディレクトリにコンポーネントをインストールする

デフォルトだと bower.json と同じ階層に components/ というディレクトリを作られてしまいます。これを変えるには、bower.json と同じ階層に ‘.bowerrc` を作成し、以下のように書けば OK です。

{
  "directory": "app/webroot/js"
}

これで bower install を実行すると、コンポーネントは app/webroot/js/<package> にインストールされます。

参考