フロントエンドのコードを Browserify を使って開発する場合、編集するたびビルドするのが面倒です。 gulp で監視したりもできますがもっと簡潔に試したい場合もあると思います。

wzrd は JavaScript を Browserify で動的に変換してくれるサーバです。ブラウザをリロードすれば Browserify を自動で実行してくれます。試しに使ってみます。

インストール

wzrd は npm でインストールできます。変換に使う Browserify も明示的にインストールする必要があります。

$ npm install -g wzrd
$ npm install -S browserify

やってみる

変換する JavaScript と HTML を用意します。

<!-- index.html -->
<!DOCTYPE html>
<html>
    <meta charset="utf-8">
</head>
<body>
    <div id="a"></div>
    <script src="a.js"></script>
</body>
</html>
// a.js

var b = require('./b');

document.querySelector('#a').textContent = b;
// b.js

module.exports = 'B';

ファイルを用意したら同じディレクトリでサーバを起動します。ポートは -p で指定します。

$ wzrd -p 8000 a.js

localhost:8000 にアクセスすると index.html が返ってきます。引数に指定した a.js は Browserify で変換されて出てきます。開くと画面に B と表示されるはずです。

Browserify のオプション

今どき素の JavaScript もどうかと思うので babelify を使ってみます。

$ npm install -S babelify

JavaScript も変更しておきます。

// a.js

import b from './b';

document.querySelector('#a').textContent = b;
// b.js

export default 'B';

起動するとき -- のあとに Browserify のオプションを指定します。

$ wzrd -p 8000 a.js -- -t babelify

localhost:8000 にアクセスすると変換されているのがわかるはずです。

サーバに組み込む

それ用のサーバを建てるのではなく、 Node.js のサーバに組み込むこともできます。 express と一緒に使うとこんなかんじです。

var express = require('express');
var wzrd = require('wzrd');

var app = express();

var handler = wzrd.static({
    entries: [{ from: 'index.js', to: 'app.js' }],
    browserifyArgs: ['-t', 'babelify']
});

app.use(function(req, res, next) {
    handler(req, res, next);
});

app.listen(8000);

wzrd.static はリクエストハンドラを返すので http.createServer に渡したりして使えます。