はじめてのBrowserify #JavaScript

タイトルを見て初心者向けのBrowserify解説記事を期待した人がいたらごめんなさい。
自分がはじめてBrowserifyを使うにあたっての個人的メモです。

今までは雑にconcatしていたけど、複数のjsファイルが依存関係にあると読み込む順番を指定しないといけないし、そもそもグローバルオブジェクトを経由するようなことは避けたい。

というわけで、Browserifyを使ってCommonJSスタイルでモジュール管理してみる。

ちゃんとした解説が読みたいなら、ちょうどCodeGridさんにBrowserifyの記事が載っているのでそちらがオススメです。
僕もお世話になりました。

試してみる

事前に、npmでBrowserifyをインストール。

npm install -g browserify

さっそく試してみる。
hoge.jsという適当なモジュールを用意。

hoge.js

function Hoge() {
    this.msg = 'hoge';
}

Hoge.prototype.setMessage = function setMessage(msg) {
    this.msg = msg;
};

Hoge.prototype.say = function say() {
    return this.msg;
};


module.exports = Hoge;

main.jsというファイルを用意して、上のモジュールを読み込んで使ってみる。

main.js

var Hoge = require('./hoge');

var hoge = new Hoge();
console.log(hoge.say());

下記コマンドでBrowserifyを実行。

browserify scripts/main.js -o scripts/bundle.js

これで依存関係を解決したbundle.jsが出力される。

お手軽ですね。
即時関数で囲むようなイディオムも必要ない。

CoffeeScriptで試す

生のJavaScriptでクラスっぽいものを書くのは辛い（というかどの書き方が正解なのかよくわからない）ので、同じことをCoffeeScriptでやってみる。

browserifyのtransformsという仕組みを使ってCoffeeScriptをJavaScriptに変換、その後、依存関係を解決して出力という流れ。

前述の手順と同じように、モジュールと、それを読み込むファイルをCofeeScriptで用意する。

hoge.coffee

class Hoge

  constructor: ->
    @msg = 'hoge'

  setMessage: (msg)->
    @msg = msg

  say: ->
    return @msg


module.exports = Hoge

main.coffee

Hoge = require './hoge'

hoge = new Hoge()
console.log hoge.say()

そして同じようにbrowserifyを実行。。する前に、CoffeeScriptをJavaScriptに変換するcoffeeifyモジュールをインストールする。

npm install coffeeify

下記のようにtransformsにcoffeeifyを指定してbrowserifyを実行することで、依存関係を解決したjsファイルを出力できる。

browserify -t coffeeify --extension=".coffee" scripts/main.coffee -o scripts/bundle2.js

エントリポイントがひとつであれば、これだけ。

今後

実案件で使うときはgulpのようなビルドシステムにタスクとして組み込んで使うことになるかと思います。
その際はファイルの変更をwatchしたり、コードをminifyしてsourcemapを出力したりすることになるかと。
あとは、外部のライブラリをrequireした場合やコード量が増えてきた時に出力に時間がかかりそうなので、差分ビルドできるようにしておくとよいかも。

その辺りは追々。