Browserifyで公開モジュールを参照して使う
最初に、公開されているNode.jsのモジュールを利用するBrowserifyのサンプルを紹介します。
リスト4は、文字列をフォーマットして、Webページに表示するサンプルです。文字列フォーマット処理はJavaScript標準で提供されていないので、Node.jsのutilモジュールが提供するフォーマット機能を利用します。
// utilモジュールからオブジェクトを生成 ...（1）
var util = require("util");
// util.formatメソッドで文字列をフォーマット ...（2）
var result = util.format("%sの動作テストです。", "Browserify");
// 文字列をページに表示 ...（3）
document.getElementById("show-result").textContent = result;
（1）でrequireメソッドを使ってutilモジュールのオブジェクトを生成し、（2）でformatメソッドにより文字列を整形しています。第1引数のフォーマット文字列中「%s」部分に第2引数の文字列が適用されます。（3）は結果文字列をページに表示する処理です。
リスト4はrequireメソッドを含むため、そのままWebブラウザで動作させることができません。そこでBrowserifyの出番です。JavaScriptファイルが存在するフォルダでリスト5のコマンドを実行すると、BrowserifyでJavaScriptファイルをビルドできます。
browserify index.js -o bundle.js
browserifyコマンドの引数としてビルドするJavaScriptファイル（スペース区切りで複数指定可能）、-oオプションの後にビルド結果を出力するJavaScriptファイルを指定します。-oオプションを指定しないと結果を標準出力に出力します。
bundle.jsをHTMLファイルで参照して実行させると、図1のようにutil.formatメソッドでフォーマットした文字列が画面に表示されます。
このようにBrowserifyを利用すると、本来Webブラウザで動作しないrequireメソッドでNode.jsのモジュールを参照して利用できます。
ここでビルド後のbundle.jsをビルド前のindex.jsと並べて表示すると図2のようになります。Browserifyによりビルド前のJavaScriptファイルに対してWebブラウザでの動作をサポートする記述が追加されることがわかります。
なお、Browserifyで利用できるNode.jsのモジュールは、Browserifyのドキュメントで以下のように案内されています。
- 入出力を伴わない多くのnpmモジュールが利用できる
- Node.jsのビルトインモジュールは明示的にrequireメソッドで参照すれば利用できる
- 一部モジュール（assert・bufferなど）はブラウザ用の互換モジュール（shim）が利用される
- 一部変数（process・Bufferなど）はブラウザ用の内容に変更される
