Browserify は CommonJS 方式で分割された JavaScript を1つにまとめて出力してくれるコマンドです。大変便利なのですが、実際の開発中はファイル編集するたびにターミナルでコマンド叩いたりするのは面倒で生産性も上がりません。

Watchify はファイルを監視して自動で Browserify を実行してくれるコマンドです。これを使うとスムーズに Browserify を使った開発を行えます。

必要な知識

インストール

Watchify は npm でインストールできます。

$ npm install -g watchify

簡単に試す

すごく単純な JavaScript を用意して試してみます。

// a.js
console.log('A');
require('./b');
// b.js
console.log('B');

このプログラムを watchify で1つにまとめます。

$ watchify a.js -o bundle.js

a.js が変換する JavaScript 、 -o bundle.jsbundle.js に結果を出力するよう指定しています。これを実行すると特に何もおこらずに止まるはずです。別のターミナルを立てて確認すると bundle.js ができていることがわかります。

-v オプションを指定すると browserify が実行されるたび画面にログが表示されます。コンパイルされたタイミングに気づきたい場合は指定しておきましょう。

ファイルを編集してみる

Watchify は Ctrl + C で終了できますが、今はまだ終了させず他のターミナルから b.js を編集してみます。

$ echo "console.log('B2');" >> b.js

ただ追記しただけです。 Watchify をつけっぱなしで、これを実行すると bundle.js も勝手に新しくなります。

ファイルを増やす

Watchify をつけっぱなしのまま続けます。次は c.js を作ってみます。

$ echo "console.log('C');" > c.js

a.jsb.jsc.js には依存していないので何も起こりません。ここで b.jsc.js に依存させてみます。

$ echo "require('./c');" >> b.js

b.js が変更されたので今度は Watchify が bundle.js を更新したはずです。

$ echo "console.log('C2');" >> c.js

さっきは c.js を編集しても何も起きませんでしたが今度はコンパイルされます。このように新しく依存されたファイルもうまく監視してくれます。

他のコマンドと組み合わせる

-o オプションで出力先のコマンドを指定しました。 -o にはコマンドも渡すことができます。具体的には |> という文字が含まれる場合にコマンドだと解釈されます。

$ npm install -g uglifyjs
$ watchify a.js -o 'uglifyjs -cm > bundle.min.js'

uglifyjs を使って minify されます。

まとめ

  • watchify はファイルを監視して browserify を実行してくれる
  • -o <file> で出力先のファイルを指定する
  • -o <command> でコマンドにまとめた JavaScript を渡すことができる
    • |> が含まれる場合にコマンドだと判断される