Bower概要

Bowerとは?

JavaScriptモジュールをダウンロード、管理するプログラム。
JavaScript版のBundlerみたいな感じ。
node.jsが必要
似たプロダクトの中では、軽量な管理ツールらしい。(競合はComponentやBrowserify)
ダウンロードするだけ。モジュールの配備はしない。
require() は提供しない。htmlから<script src="bower_component/jquery/dist/jquery.js">みたいにする必要がある。
ファイルの配備をしない。bower_component/jquery/dist/jquery.js みたいなファイルにアクセスする必要がある。配備をするには他のツールと連携する必要あり。(grunt-bower-taskを使うなどすればいいらしい。 http://yosuke-furukawa.hatenablog.com/entry/2013/06/04/085537)

何がうれしい?

JavaScriptモジュールのバージョン管理を任せられる
ダウンロードするのが楽

インストール

node.jsインストールしてなかったらインストール
npm install -g bower

Hello World

bower init # ウィザード形式で、bower.jsonを作る
bower install vue --save # --saveつけると、bower.jsonに保存する
bower install jquery --save

vim index.html

ダウンロードをしてくれるだけだけど、一からJavaScriptをダウンロードしてたのに比べればだいぶ楽。

cat bower.json
{
  "name": "bower_test",
  "version": "0.0.0",
  "authors": [
    "Yoshihiro Kameda <kameda.sbng@gmail.com>"
  ],
  "license": "MIT",
  "ignore": [
    "**/.*",
    "node_modules",
    "bower_components",
    "test",
    "tests"
  ],
  "dependencies": {
    "vue": "~0.10.6",
    "jquery": "~2.1.1"
  }
}

nodeのhttp-serverを使えば、確認用のweb serverも使えるようになる。

http-server -p 8080

静的サイトの開発環境はこれで整う。かなり楽。

railsと一緒に使う

このサイトのとおりに設定したらOK http://www.iconoclastlabs.com/blog/bower-and-rails-4

ざっくりいうとこういうことを設定してる

bowerが管理するモジュールをvendor/assets/components にダウンロードするように
bower init を普通に実行
config/application.rb に、asset pathにvendor/assets/components を追加
bower install xxx を普通に実行
application.js に、bowerがダウンロードしたモジュールの require を追加
application.css に、bowerがダウンロードしたモジュールの require を追加
これで普通に使える

railsとbowerの併用は相性良さそう。 requireはasset pipelineが受け持って、モジュールのダウンロードはbowerが管理するので、住み分けができてる。 browserifyとrailsの併用を試してないけど、browserifyはrequireを提供してるので、おそらくasset pipelineとバッティングして相性悪いはず