Railsで外部JavaScriptライブラリなどのAssetを管理するなら、bower-railsが便利

Pocket

みなさま、Railsで外部のJavaScriptライブラリ、例えばUnderscore.jsなどを管理するとき、どんな方法を使っていますか? ファイルを落としてきてvendor/以下につっこんでますか?

でもそれだと、いざバージョンアップしようと思ったときに面倒ですし、バグがあるのでバージョンを戻したい、といったときにも不便です。そもそもバージョンを管理できていません。

そんなとき、JSの世界ではBowerというツールでライブラリを管理します。Rubyの世界でのBundlerのようなものです。これをRailsで簡単に使えるようにしたのがbower-railsです。

使い方

事前に用意するもの

Railsの環境があることは前提にして、他に以下のセットアップが必要です。

  • node.js
  • bower

このセットアップについては「Bower入門(基礎編)」という記事で分かりやすくまとめられていますので、まだ導入されていない方は、こちらの記事を参考にセットアップしてみてください。

注意:node.jsのバージョンについて

nodebrewを利用してインストールされる場合は、上記の記事のnode.jsのバージョンだとちょっと古いので、以下のように最新版(2014/4/14現在)のバージョンを指定してnode.jsをインストールして下さい。

Railsへの導入方法

Railsのバージョンは4.0.4、rubyのバージョンは2.1.1の環境で説明します。

terminal01

Gemfileには以下のようにbower-railsを追加します。

Gemfileへの追加後、bundle installしまして、次はBowerで管理したいライブラリを管理するBowerfileを作成します。今回はunderscore.jsを使いたいというニーズがあるとして、以下のようなBowerfileを用意します。

Bowerfileで指定できるライブラリは、ライブラリのルートにbower.jsonが設定されている、つまりBowerに対応しているものに限られます。

Bowerfileを作成したあとはライブラリをプロジェクト内にダウンロードするため、bundle exec rake bower:installを実行します。すると、vendor/bower.jsonが作成(または更新)されるのと同時にvendor/bower_componentsにライブラリがダウンロードされます。

terminal02

こんな感じにライブラリがダウンロードされます。

terminal03

vendor/assets/bower_components以下にダウンロードされるので、application.jsでrequireするためにも、このパスをconfig.assets.pathsに追加しておきます。

ここまで終わったらあとはapp/assets/javascripts/application.jsrequireするだけです。

これでunderscore.jsを使えるようになりました!

素朴な疑問:bower_componentsはGitで管理するの?

結論から言うと管理しないのが一般的なようなので、.gitignoreにvendor/bower_componentsを追加するのが良いと思います。

参考:[Bower] bower_components ディレクトリはgitで管理すべきか問題

BowerでダウンロードされたライブラリのバージョンはGemfile.lockのようにvendor/bower.jsonで管理されるので、このファイル自体はバージョン管理しておく必要があります。

Bower便利なので、zurui-sassなんかもBowerに対応するようにしていきたいですね。