Bower + RequireJS

なんとなく Bower 使って RequireJS するライブラリをマネージする方法が分かってきたのでメモ。

npm インストール後から。

# npm 使ってインストール
npm install -g bower
# 動作確認
bower -v
# 好きなディレクトリへ
cd myDir
# bower の初期設定 質問は適当に答えれば OK
bower init

bower initまで実行すると、実行したディレクトリ内に質問に答えた内容を記述した設定ファイル、bower.json が生成されているのが確認できる。このファイル内にパッケージ名を記入することで、bower はプロジェクトの依存ライブラリを管理できる仕組み。 bower init を実行するのはどこでもいいのだが、可視性のためにもプロジェクトのトップディレクトリにおいておくのがよい気がした。

たとえば、今回は Masonry の依存関係を記述するために使ってみたので、以下のようなものになる。

{
  "name": "klee-arc",
  "version": "1.4.1",
  "authors": [
    "klee-arc <hoge@gmail.com>"
  ],$ 
  "description": "none",
  "main": "index.js",
  "keywords": [
    "masonry"
  ],
  "license": "MIT",
  "dependencies": {
    "jquery": "~2.1.4",
    "masonry": "~3.3.0",
    "infinite-scroll": "~2.1.0",
    "requirejs": "~2.1.17",
    "modernizr": "~2.8.3",
    "jquery-bridget": "~1.1.0"
  }
}

極めて分かりやすい。

パッケージを新しくインストールするためには、bower.json の置いてあるディレクトリ内で

bower install --save パッケージ名

と実行することでそのライブラリを bower_components 内にダウンロードした上で、bower.json への記述までやってくれる。ちなみに、--save を指定しないと bower.json への記述はせずにライブラリをダウンロードする。実際には bower_components なんてフォルダに入れてもらいたくはないだろうから、bower.jsonと同じディレクトリ内に、.bowerrc というファイルを作成し、以下のようにダウンロード先のディレクトリを指定するといい。

{
  "directory" : "js/components"
}

一方、開発用だけに使いたいライブラリ（コンパイル系など）は、

bower install --save-dev パッケージ名

とすることで、開発用のパッケージとして bower.json 内に記述される。

bower.json 内に記述されたライブラリをインストールする際は、引数に何も指定せずに、

bower install

もしくは、

bower install --production

とすればよい。後者を実行すると先ほどの開発用のライブラリ群はインストールされない。

今回は RequireJS を使うので、RequireJS 、Masonry 、Masonry 用に jquery-bridget の三つを指定してインストール。

bower install --save requirejs masonry jquery-bridget

ここまで来ると、RequireJS を使うことができるようになる。今後ディレクトリ構造が重要になるので、一度今回のプロジェクトのファイル構成を下に書く :

.bowerrc
bower.json
index.html
js --- components --- main.js

大体上記のとおりである。

さて、当然 RequireJS は components の中にあるので、index.html には以下のように記述する。

<script type="text/javascript" data-main="js/main" src="js/components/requirejs/require.js"></script>

上記の記述をすると、 require.js を呼び出したのち（を使って？）、js/main.js を実行してくれる。なので、今度は js/main.js に呼び出しの記述をしていく。

js/main.js は以下のようになっている :

requirejs.config({                                   
  baseUrl: 'js/components',                          
  paths: {                                           
    'jquery':   'jquery/dist/jquery.min',            
    'masonry':  'masonry/dist/masonry.pkgd.min',     
    'bridget':  'jquery-bridget/jquery.bridget'      
  },                                                 
  shim: {
    'masonry': {                                     
      deps: ['jquery','bridget']                     
    }
  } 
}); 

require(['masonry'], function(masonry) {             
    $.bridget( 'masonry', masonry );                 
    $("#container").masonry({                              
      columnWidth: 100,                              
      itemSelector: '.item'                   
    });

})

まずは requirejs.config() で RequireJS の設定をすることができる。

baseUrl : 　ライブラリを呼び出す際の可憐とパスとして指定されるパス。　ここでは js/components を指定しているので、以降パスを記述すると、js/components/~ という風に解釈される。
paths : 　パスの記述。　ここに記述しておくと、実際にライブラリを呼び出すコードとライブラリの配置場所の記述を分離できてとても便利。
shim : 　依存関係の記述。　各ライブラリごとに、deps というパラメータで依存するライブラリを、exports というパラメータでそのライブラリに割り当てるグローバル変数を指定可能（exports は使ったことないけれど、jQuery の「$」みたいな感じだと思う）。

他にも bundles とかいろいろあるけど、とりあえず最低限上記三つを把握しておけば死なないと思った。

その後、require() で呼び出して、コールバックをセットしておくことで、ライブラリがロードされた後に実行したいコードを指定できる。

この要領で他のライブラリも追加していけばいい。 requirejs-plugin-bower とかいう bower.json を自動で読んでライブラリの記述を勝手にしてくれるプラグインもあるようだが、試してみても動かなかったことと、実際にはページによって使うライブラリが変わったりすることは割とあり得ることだなと思い、今回は使わなかった。ちょっと記述が多めな SAP をつくるときには便利なのかもしれない。

ちなみに、Masonry が jquery-bridget とかいうライブラリがないと RequireJS では使えないことと、RequireJS のウェブサイトが異様に不親切なことにびっくりした。

参考 :

Bower入門(基礎編) - from scratch

RequireJS RequireJS使い方メモ - Qiita [JS] RequireJSのオプションで良く利用するBaseUrl, Paths, Shimを学ぶ - YoheiM .NET