Node.jsのモジュール依存解決メソッドをブラウザでも使えるBrowserify

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

Browserifyで公開モジュールを参照して使う

　最初に、公開されているNode.jsのモジュールを利用するBrowserifyのサンプルを紹介します。

　リスト4は、文字列をフォーマットして、Webページに表示するサンプルです。文字列フォーマット処理はJavaScript標準で提供されていないので、Node.jsのutilモジュールが提供するフォーマット機能を利用します。

リスト4　requireメソッドでモジュールを参照するサンプル（hello_browserify_1/js/index.js）

// 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ファイルをビルドできます。

リスト5　BrowserifyでJavaScriptをビルドするコマンド

browserify index.js -o bundle.js

　browserifyコマンドの引数としてビルドするJavaScriptファイル（スペース区切りで複数指定可能）、-oオプションの後にビルド結果を出力するJavaScriptファイルを指定します。-oオプションを指定しないと結果を標準出力に出力します。

　bundle.jsをHTMLファイルで参照して実行させると、図1のようにutil.formatメソッドでフォーマットした文字列が画面に表示されます。

図1　Browserifyで変換したWebページの実行例（hello_browserify_1）

　このようにBrowserifyを利用すると、本来Webブラウザで動作しないrequireメソッドでNode.jsのモジュールを参照して利用できます。

　ここでビルド後のbundle.jsをビルド前のindex.jsと並べて表示すると図2のようになります。Browserifyによりビルド前のJavaScriptファイルに対してWebブラウザでの動作をサポートする記述が追加されることがわかります。

図2　ビルド後（写真＝下）はビルド前（写真＝上）のコードに多数の記述が追加される

　なお、Browserifyで利用できるNode.jsのモジュールは、Browserifyのドキュメントで以下のように案内されています。

• 入出力を伴わない多くのnpmモジュールが利用できる
• Node.jsのビルトインモジュールは明示的にrequireメソッドで参照すれば利用できる
• 一部モジュール（assert・bufferなど）はブラウザ用の互換モジュール（shim）が利用される
• 一部変数（process・Bufferなど）はブラウザ用の内容に変更される