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メソッドでフォーマットした文字列が画面に表示されます。
![図1 Browserifyで変換したWebページの実行例(hello_browserify_1)](http://cz-cdn.shoeisha.jp/static/images/article/9370/9370_001.gif)
このようにBrowserifyを利用すると、本来Webブラウザで動作しないrequireメソッドでNode.jsのモジュールを参照して利用できます。
ここでビルド後のbundle.jsをビルド前のindex.jsと並べて表示すると図2のようになります。Browserifyによりビルド前のJavaScriptファイルに対してWebブラウザでの動作をサポートする記述が追加されることがわかります。
![図2 ビルド後(写真=下)はビルド前(写真=上)のコードに多数の記述が追加される](http://cz-cdn.shoeisha.jp/static/images/article/9370/9370_002_s.gif)
なお、Browserifyで利用できるNode.jsのモジュールは、Browserifyのドキュメントで以下のように案内されています。
- 入出力を伴わない多くのnpmモジュールが利用できる
- Node.jsのビルトインモジュールは明示的にrequireメソッドで参照すれば利用できる
- 一部モジュール(assert・bufferなど)はブラウザ用の互換モジュール(shim)が利用される
- 一部変数(process・Bufferなど)はブラウザ用の内容に変更される