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

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

　本連載では主にHTML／JavaScript開発作業を効率化する様々なツールやライブラリを紹介します。前回紹介したBrowserifyは、Node.jsのモジュール依存解決に利用されるrequireメソッドを含むJavaScriptコードを変換して、Webブラウザでも動作させられるツールです。今回はコマンドラインオプションやAPI、Watchifyの変更監視機能、gulpと組み合わせた利用など、Browserifyの応用的な利用例を説明します。

はじめに

　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のようなコマンドラインで利用しました。

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

browserify index.js -o bundle.js

　ここで「-o」は、変換したJavaScriptファイルの出力先を表すコマンドラインオプションです。このオプションを指定しない場合、変換結果は標準出力に出力されます。このようにbrowserifyコマンドには動作を変えるコマンドラインオプションがいくつか存在します。

　コマンドラインオプションの一部を表1に示します。すべてのコマンドはGitHubリポジトリのドキュメントに記載されています。

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

オプション	オプション（省略形）	意味
--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に変換結果が出力されます。

リスト2　date-utilsとgreetObjモジュールを外部に公開する設定で変換するコマンド

browserify -r date-utils -r ./modules/greetObj.js:greetObj -o require.js

　HTMLの記述例はリスト3です。（1）で生成したrequire.jsを参照させると、その後のJavaScriptで（2）や（3）のようにrequireメソッドでモジュールを利用できます。

リスト3　HTMLに記述されたJavaScriptからモジュールを参照（more_browserify_1/index.html）

<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のようにあいさつ文が画面に表示されます。

図1　リスト3の実行結果（more_browserify_1）