あんまりjavascriptに詳しくない人間が、jqueryとunderscoreで scaffold generator(railsのscaffoldコマンドをブラウザから作成するSPA)つくったのですが。。 イマイチいまどきのjavascriptぽくなっていないわけです。 テストも書きたいし、reactとかもやっってみたいし、、 やりたいことはいっぱいあったのですが、まず依存管理ツールを導入するべく requirejsを導入してみましたが、browserify のが良いというのを聞きしました。
<script async src="//platform.twitter.com/widgets.js" charset="utf-8"></script>@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の強みだと思います。
