ファイル変更を監視するWatchify
Watchifyは、ファイル変更を監視して自動的にBrowserifyを実行するツールです。リスト4のコマンドでインストールできます。
npm install -g watchify
browserifyコマンドの代わりにwatchifyコマンドを利用して、リスト5のように実行します。
watchify index.js -o bundle.js
リスト5を実行すると、index.jsや、内部的に参照されているモジュールのJavaScriptファイルが変更されるたびにbundle.jsへの変換処理が行われます。
Browserify／WatchifyのAPIをスクリプトや他のツールから利用
これまではBrowserifyやWatchifyをコマンドラインから実行してきましたが、ほかのJavaScriptコードやツールと連携させるには、機能をAPIとして利用できると便利です。BrowserifyやWatchifyはそれ自体をNode.jsのモジュールとして参照することで、各種APIが利用できます。
APIを利用するには、まずリスト6のコマンドで、BrowserifyやWatchifyを（システム全体ではなく）プロジェクトにインストールします。
npm install browserify npm install watchify
ただしサンプルコードでは前述のようにプロジェクトファイルにモジュールを定義済みなので、「npm install」コマンドで必要なモジュールをまとめてインストールできます。
Browserify APIの基本的な利用例
BrowserifyのAPIを利用する例をリスト7に示します。
// ファイル出力モジュール ...（1）
var fs = require("fs");
// Browserifyを読み込み ...（2）
var browserify = require("browserify");
// Browserifyオブジェクト生成 ...（3）
var b = browserify();
// 処理対象ファイルを追加 ...（4）
b.add("js/index.js");
// 変換してストリームを取得 ...（5）
var stream = b.bundle();
// ストリームからファイル出力 ...（6）
stream.pipe(fs.createWriteStream("js/bundle.js"));
（1）は結果をファイルに出力するために利用するfsモジュールの定義です。（2）のrequireメソッドでBrowserifyオブジェクトを生成するbrowserify関数を取得し、（3）でその関数でBrowserifyオブジェクトを生成しています。（4）でbrowserifyオブジェクトに処理対象JavaScriptを追加して（5）で処理を実行します。実行結果はストリームで取得されるので、（6）でfsモジュールを利用してファイルに出力しています。
リスト7をコマンドラインで「node exec_browserify.js」と実行すると処理が実行されます。
Browserifyオブジェクトはオプションやメソッドによる指定で挙動を変えることができます。例としてリスト2で紹介した、モジュールを外部JavaScriptに公開するサンプルをリスト8に示します。
// ファイル出力モジュール ...（1）
var fs = require("fs");
// Browserifyを読み込み ...（2）
var browserify = require("browserify");
// Browserifyオブジェクト生成 ...（3）
var b = browserify({
require:["date-utils"] // date-utilsをrequireに追加 ...（3a）
});
// greetObj.jsを「greetObj」モジュールとして追加 ...（4）
b.require("./js/modules/greetObj.js", {expose:"greetObj"});
// 変換してストリームを取得 ...（5）
var stream = b.bundle();
// ストリームからファイル出力 ...（6）
stream.pipe(fs.createWriteStream("js/require.js"));
（3a）でbrowserifyメソッドの引数に与えているrequireオプションで、date-utilsを公開するようにしています。自作モジュールは名前を「greetObj」に変えて公開するために、Browserifyオブジェクトのrequireメソッドで後から追加指定します（4）。これらの記述はリスト2の-rオプション指定と同じ意味を表します。
BrowserifyのプラグインになるWatchifyモジュール
BrowserifyのAPIでWatchifyの機能を利用する場合は、Watchifyモジュールを参照して生成したJavaScriptオブジェクトを、Browserifyのプラグインとしてリスト9（3）のように指定します。なおWatchifyのドキュメントでは（1）、（2）のようにキャッシュ指定を記述するよう指示されています。
var watchify = require("watchify");
var b = browserify({
cache: {}, // ...（1）
packageCache: {}, // ...（2）
plugin: [watchify] // ...（3）
});
Browserifyのイベント処理
Browserifyオブジェクトが処理を行うとき、内容に応じたイベントが発生します。主なイベントを表2に示します。このうちupdateイベントはWatchifyをプラグインに指定したときのみ発生します。
| イベント名 | 発生タイミング |
|---|---|
| bundle | 変換処理が行われたとき |
| file | 変換対象ファイルが読み込まれたとき |
| update | Watchifyがファイルの変更を検出したとき |
これらのイベントはBrowserifyオブジェクトのonメソッドで処理を指定できます。具体的な記述方法は後述のgulp連携サンプルで説明します。
