browserifyを使ってみた。

あんまりjavascriptに詳しくない人間が、jqueryとunderscoreで scaffold generator(railsのscaffoldコマンドをブラウザから作成するSPA)つくったのですが。。 イマイチいまどきのjavascriptぽくなっていないわけです。 テストも書きたいし、reactとかもやっってみたいし、、 やりたいことはいっぱいあったのですが、まず依存管理ツールを導入するべく requirejsを導入してみましたが、browserify のが良いというのを聞きしました。

@koheiSG mocha + power-assert なら全力でサポートできますぞ (あと RequireJS よりは browserify がおすすめです)

— Takuto Wada (@t_wada) 2015, 3月 15

※ twadaさんがmochaとかpower-assertと言ってるのはテスト書きたいとかも言ってたからです。いやぁ、全力でサポートいただけるようにちょくちょくやっていかないと。。 というわけで、browserifyを導入していきます。

導入方法

まずは、なにはともあれ、browserifyをインストールします。

$ npm install -g browserify
$ npm install debowerify

そして既に、モジュール管理は全てbowerを使用しているため、debowerifyもインストールします。 browserifyでは、requireを書くだけで、簡単に依存関係が解決できます。javascript以外の言語みたいですね。まぁnodejsでは当たり前の話。

$ = require('jquery');
_ = require('underscore');

このように記述します。 そのあと、browserifyコマンドで行います。-tオプションでdebowerifyを指定します。

$ browserify -t debowerify app.js -o bundle.js

エラーなく完了したら、bundle.jsができています。 現状のHTMLはこんな感じでbowerで入れたモジュールを全て読み込んでいます。

<script type="text/javascript" src="./bower_components/jquery/dist/jquery.min.js"></script>
<script type="text/javascript" src="./bower_components/bootstrap/dist/js/bootstrap.min.js"></script>
<script type="text/javascript" src="./bower_components/underscore/underscore-min.js"></script>

これらを全て削除して、下記に一元化します。

<script type="text/javascript" src="./bundle.js"></script>

これで完了です。 今回のソースの変更履歴は こちらのPRで確認できます。

requirejsとの比較

requirejsは日本語の情報も少なくて、すでにbowerで導入したscaffold generatorでは導入するのに手こずりました。(といっても、導入したのが結構前で何にはまったかは忘れた) browserifyも同様に日本語の情報はまだまだ少ないのですが、DSL的なことを書かなくていいのですっきりしていますね。

browserify init by koheisg · Pull Request #6 · koheisg/scaffold-generator Requirejs by koheisg · Pull Request #5 · koheisg/scaffold-generator

この2つを比べると非常にわかりやすいですかね。 require.config みたいなものを書かなくて良いのは、非常にbrowserifyの強みだと思います。