dreamin' blog

browserifyを使ってみた。

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

<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>

※ 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の強みだと思います。