KB)本連載では主にHTML/JavaScript開発作業を効率化する様々なツールやライブラリを紹介します。前回紹介したBrowserifyは、Node.jsのモジュール依存解決に利用されるrequireメソッドを含むJavaScriptコードを変換して、Webブラウザでも動作させられるツールです。今回はコマンドラインオプションやAPI、Watchifyの変更監視機能、gulpと組み合わせた利用など、Browserifyの応用的な利用例を説明します。APIの基本的な利用例BrowserifyのプラグインになるWatchifyモジュールBrowserifyのイベント処理Page3Browserify/Watchifyとgulpを組み合わせた自動更新まとめ参考資料はじめにNode.jsで実行するJavaScriptでは、モジュール同士の依存関係をrequireメソッドで自動的に解決できますが、requireメソッドを含んだコードは一般のWebブラウザでそのまま動作できません。そこでBrowserifyを使うと、JavaScriptコードを変換して動作させることができます。前回記事ではBrowserifyを最低限のオプションでコマンドラインから実行しました。今回はコマンドラインオプションで動作をカスタマイズしたり、モジュールとして他のツールと連携させたりといった、Browserifyのより深い使いこなしについて、サンプルとともに説明していきます。browserify」コマンドを実行するとBrowserifyがインストールされます。詳細は前回記事を参照してください。今回は以下の環境で動作を確認しています。Edgeでは、ブラウザ仕様により後述のLiveReload機能が動作しません。11サンプルコードについてダウンロードできるサンプルコードには、必要なモジュールを定義したプロジェクトファイル(project.json)が含まれています。install」コマンドを実行して、必要なモジュールをダウンロードしてください。今回の説明では、前回記事で実装したあいさつモジュール(greetObj)を再び利用します。実装の内容は前回記事やダウンロードできるサンプルを参照してください。コマンドラインオプションで動作をカスタマイズ前回記事ではBrowserifyをリスト1のようなコマンドラインで利用しました。bundle.jsここで「-o」は、変換したJavaScriptファイルの出力先を表すコマンドラインオプションです。このオプションを指定しない場合、変換結果は標準出力に出力されます。このようにbrowserifyコマンドには動作を変えるコマンドラインオプションがいくつか存在します。コマンドラインオプションの一部を表1に示します。すべてのコマンドはGitHubリポジトリのドキュメントに記載されています。出力先ファイルから省略するファイルの指定ここでは例として、モジュールを外部に公開する--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に変換結果が出力されます。require.jsHTMLの記述例はリスト3です。(1)で生成したrequire.jsを参照させると、その後のJavaScriptで(2)や(3)のようにrequireメソッドでモジュールを利用できます。false);</script>リスト3を実行すると図1のようにあいさつ文が画面に表示されます。