5分でbowerをRailsに導入する

rails js

プロジェクトでjsのライブラリをどうやって管理するかみたいな話を隣の人としてて、

  • jquery-railsとかgem使う
  • bundle updateで依存地獄なきにしもあらずなので、app/assets/javascript/vendor/とかに置く
  • いやいやそれならvendor/assets/以下でしょ
  • bowerって最近なうい感じがする

ということで、bower使うと楽なんじゃないかみたいな結論にいたった。

https://github.com/twitter/bower

Twitter社が作っているアセット管理ツールで、Twitter社が作ってるなら安心だろうみたいな感はあるけど、シンプルで使いやすい。 nodeで作られてるのでnpmでinstallする。

$ npm install -g bower

bower installすると$HOMEに.bowerが作成されてそこにライブラリがキャッシュされる。

$ bower install jquery backbone underscore

Railsアプリでbowerを使うには、Rails.rootで.bowerrcとcomponent.jsonを書く。

// .bowerrc
{
  "directory": "vendor/assets/components"
}
// component.json
{
  "name": "Project name",
  "dependencies": {
    "jquery": "~1.9.1",
    "underscore": "~1.4.4",
    "backbone": "~0.9.10",
    "jquery.clickex": "https://gist.github.com/yoppi/4942811/raw/7b86d0b76addfd27c480fb5920a5a93af7940831/jquery.clickex.js"
  }
}

bower installすると、.bowerrcで指定したディレクトリにインストールしてくれる。 自分で書いたライブラリをgistにおいててもbowerで管理できる。便利。 あとは、AssetPathを通してapplication.jsに書く。

# application.rb
config.assets.paths << Rails.root.join('vendor', 'assets', 'components')

//= require jquery/jquery-min
//= require underscore/underscore-min
//= require backbone/backbone-min
//= require jquery.clickex/index

いろいろスッキリ管理できるのでbower便利だと思った。