モジュール管理を簡単にするBrowserifyをAPIや他ツール連携で使いこなす

HTML／JavaScript開発作業を効率化する便利ツールの活用 第8回

ファイル変更を監視するWatchify

　Watchifyは、ファイル変更を監視して自動的にBrowserifyを実行するツールです。リスト4のコマンドでインストールできます。

リスト4　Watchifyをインストールするコマンド

npm install -g watchify

　browserifyコマンドの代わりにwatchifyコマンドを利用して、リスト5のように実行します。

リスト5　watchifyコマンドの実行例

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を（システム全体ではなく）プロジェクトにインストールします。

リスト6　Browserify／Watchifyをプロジェクトにインストールするコマンド

npm install browserify
npm install watchify

　ただしサンプルコードでは前述のようにプロジェクトファイルにモジュールを定義済みなので、「npm install」コマンドで必要なモジュールをまとめてインストールできます。

Browserify APIの基本的な利用例

　BrowserifyのAPIを利用する例をリスト7に示します。

リスト7　BrowserifyのAPIで変換処理する実装（more_browserify_2/exec_browserify.js）

// ファイル出力モジュール ...（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」と実行すると処理が実行されます。

図2　nodeコマンドでBrowserifyのAPIを実行（more_browserify_2/exec_browserify.js）

　Browserifyオブジェクトはオプションやメソッドによる指定で挙動を変えることができます。例としてリスト2で紹介した、モジュールを外部JavaScriptに公開するサンプルをリスト8に示します。

リスト8　モジュールを外部JavaScriptに公開する変換処理（more_browserify_3/exec_browserify.js）

// ファイル出力モジュール ...（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）のようにキャッシュ指定を記述するよう指示されています。

リスト9　WatchifyをBrowserifyのプラグインとして設定

var watchify = require("watchify");
var b = browserify({
    cache: {},          // ...（1）
    packageCache: {},   // ...（2）
    plugin: [watchify]  // ...（3）
});

Browserifyのイベント処理

　Browserifyオブジェクトが処理を行うとき、内容に応じたイベントが発生します。主なイベントを表2に示します。このうちupdateイベントはWatchifyをプラグインに指定したときのみ発生します。

表2　browserifyコマンドラインオプション（一部）

イベント名	発生タイミング
bundle	変換処理が行われたとき
file	変換対象ファイルが読み込まれたとき
update	Watchifyがファイルの変更を検出したとき

　これらのイベントはBrowserifyオブジェクトのonメソッドで処理を指定できます。具体的な記述方法は後述のgulp連携サンプルで説明します。