はじめに
Node.jsで実行するJavaScriptでは、モジュール同士の依存関係をrequireメソッドで自動的に解決できますが、requireメソッドを含んだコードは一般のWebブラウザでそのまま動作できません。そこでBrowserifyを使うと、JavaScriptコードを変換して動作させることができます。
前回記事ではBrowserifyを最低限のオプションでコマンドラインから実行しました。今回はコマンドラインオプションで動作をカスタマイズしたり、モジュールとして他のツールと連携させたりといった、Browserifyのより深い使いこなしについて、サンプルとともに説明していきます。
対象読者
- Browserifyをコマンドライン以外から利用したい方
- 依存関係を解決する手間さえもかけたくない方
- ソースコードを編集したときに自動変換させたい方
必要な環境の準備
Node.js環境で「npm install -g browserify」コマンドを実行するとBrowserifyがインストールされます。詳細は前回記事を参照してください。
今回は以下の環境で動作を確認しています。なおWindows 10標準ブラウザのMicrosoft Edgeでは、ブラウザ仕様により後述のLiveReload機能が動作しません。
- Windows 10 64bit版
- Node.js v5.10.1 64bit版
- Browserify v13.0.0
- Internet Explorer 11
サンプルコードについて
ダウンロードできるサンプルコードには、必要なモジュールを定義したプロジェクトファイル（project.json）が含まれています。そのためサンプルの実行前に「npm install」コマンドを実行して、必要なモジュールをダウンロードしてください。
また今回の説明では、前回記事で実装したあいさつモジュール（greetObj）を再び利用します。実装の内容は前回記事やダウンロードできるサンプルを参照してください。
コマンドラインオプションで動作をカスタマイズ
前回記事ではBrowserifyをリスト1のようなコマンドラインで利用しました。
browserify index.js -o bundle.js
ここで「-o」は、変換したJavaScriptファイルの出力先を表すコマンドラインオプションです。このオプションを指定しない場合、変換結果は標準出力に出力されます。このようにbrowserifyコマンドには動作を変えるコマンドラインオプションがいくつか存在します。
コマンドラインオプションの一部を表1に示します。すべてのコマンドはGitHubリポジトリのドキュメントに記載されています。
| オプション | オプション（省略形） | 意味 |
|---|---|---|
| --outfile | -o | 結果出力先ファイルの指定 |
| --require | -r | 外部に公開するモジュールの指定 |
| --exclude | -u | 出力先ファイルから省略するファイルの指定 |
ここでは例として、モジュールを外部に公開する--require（-r）オプションの利用法を紹介します。
-rオプションでモジュールを外部のJavaScriptに公開
リスト1のコマンドでは、requireメソッドによるモジュール参照をすべて変換して、単一のbundle.jsを生成します。しかしこの方法では、内部ですべてのモジュール依存関係が解決されるため、外部のJavaScript（例えばHTMLファイル内にインラインで記述するJavaScript）からモジュールを参照できません。
-rオプションで公開するモジュールを指定すると、外部のJavaScriptでモジュールを参照できるようになります。ここではNode.jsで日付フォーマット処理を提供するdate-utilsモジュールと、自作のgreetObjモジュールを外部から利用できるようにしてみます。
モジュールを公開するには、jsフォルダでリスト2のようにオプションを指定してbrowserifyを実行します。ひとつ目の-rオプションはdate-utilsモジュールの指定で、Node.jsのモジュールはモジュール名のみを指定します。ふたつ目の-rオプションは自作greetObjモジュールの指定で、自作モジュールの場合は「<JavaScriptファイルへのパス>:<公開するモジュール名>」のように指定します。コマンドを実行すると、-oオプションに指定されたrequire.jsに変換結果が出力されます。
browserify -r date-utils -r ./modules/greetObj.js:greetObj -o require.js
HTMLの記述例はリスト3です。（1）で生成したrequire.jsを参照させると、その後のJavaScriptで（2）や（3）のようにrequireメソッドでモジュールを利用できます。
<script src="js/require.js"></script><!-- モジュール変換ファイル参照 ...（1）-->
<script>
window.addEventListener("load", function(){
// greetObjモジュールからオブジェクトを生成
// 変換時に指定した名称greetObjを利用 ...（2）
var greetObj = require("greetObj");
//（中略）
// 比較用に現在日時を表示
// date-utilsモジュールを参照 ...（3）
require("date-utils");
//（中略）
}, false);
</script>
リスト3を実行すると図1のようにあいさつ文が画面に表示されます。
