CodeZine(コードジン)

特集ページ一覧

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

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

  • LINEで送る
  • このエントリーをはてなブックマークに追加
目次

ファイル変更を監視するWatchify

 Watchifyは、ファイル変更を監視して自動的にBrowserifyを実行するツールです。リスト4のコマンドでインストールできます。

リスト4 Watchifyをインストールするコマンド
npm install -g watchify

 browserifyコマンドの代わりにwatchifyコマンドを利用して、リスト5のように実行します。

リスト5 watchifyコマンドの実行例
watchify index.js -o bundle.js

 リスト5を実行すると、index.jsや、内部的に参照されているモジュールのJavaScriptファイルが変更されるたびにbundle.jsへの変換処理が行われます。

Browserify/WatchifyのAPIをスクリプトや他のツールから利用

 これまではBrowserifyやWatchifyをコマンドラインから実行してきましたが、ほかのJavaScriptコードやツールと連携させるには、機能をAPIとして利用できると便利です。BrowserifyやWatchifyはそれ自体をNode.jsのモジュールとして参照することで、各種APIが利用できます。

 APIを利用するには、まずリスト6のコマンドで、BrowserifyやWatchifyを(システム全体ではなく)プロジェクトにインストールします。

リスト6 Browserify/Watchifyをプロジェクトにインストールするコマンド
npm install browserify
npm install watchify

 ただしサンプルコードでは前述のようにプロジェクトファイルにモジュールを定義済みなので、「npm install」コマンドで必要なモジュールをまとめてインストールできます。

Browserify APIの基本的な利用例

 BrowserifyのAPIを利用する例をリスト7に示します。

リスト7 BrowserifyのAPIで変換処理する実装(more_browserify_2/exec_browserify.js)
// ファイル出力モジュール ...(1)
var fs = require("fs");

// Browserifyを読み込み ...(2)
var browserify = require("browserify");
// Browserifyオブジェクト生成 ...(3)
var b = browserify();
// 処理対象ファイルを追加 ...(4)
b.add("js/index.js");
// 変換してストリームを取得 ...(5)
var stream = b.bundle();
// ストリームからファイル出力 ...(6)
stream.pipe(fs.createWriteStream("js/bundle.js"));

 (1)は結果をファイルに出力するために利用するfsモジュールの定義です。(2)のrequireメソッドでBrowserifyオブジェクトを生成するbrowserify関数を取得し、(3)でその関数でBrowserifyオブジェクトを生成しています。(4)でbrowserifyオブジェクトに処理対象JavaScriptを追加して(5)で処理を実行します。実行結果はストリームで取得されるので、(6)でfsモジュールを利用してファイルに出力しています。

 リスト7をコマンドラインで「node exec_browserify.js」と実行すると処理が実行されます。

図2 nodeコマンドでBrowserifyのAPIを実行(more_browserify_2/exec_browserify.js)
図2 nodeコマンドでBrowserifyのAPIを実行(more_browserify_2/exec_browserify.js)

 Browserifyオブジェクトはオプションやメソッドによる指定で挙動を変えることができます。例としてリスト2で紹介した、モジュールを外部JavaScriptに公開するサンプルをリスト8に示します。

リスト8 モジュールを外部JavaScriptに公開する変換処理(more_browserify_3/exec_browserify.js)
// ファイル出力モジュール ...(1)
var fs = require("fs");

// Browserifyを読み込み ...(2)
var browserify = require("browserify");
// Browserifyオブジェクト生成 ...(3)
var b = browserify({
    require:["date-utils"] // date-utilsをrequireに追加 ...(3a)
});
// greetObj.jsを「greetObj」モジュールとして追加 ...(4)
b.require("./js/modules/greetObj.js", {expose:"greetObj"});
// 変換してストリームを取得 ...(5)
var stream = b.bundle();
// ストリームからファイル出力 ...(6)
stream.pipe(fs.createWriteStream("js/require.js"));

 (3a)でbrowserifyメソッドの引数に与えているrequireオプションで、date-utilsを公開するようにしています。自作モジュールは名前を「greetObj」に変えて公開するために、Browserifyオブジェクトのrequireメソッドで後から追加指定します(4)。これらの記述はリスト2の-rオプション指定と同じ意味を表します。

BrowserifyのプラグインになるWatchifyモジュール

 BrowserifyのAPIでWatchifyの機能を利用する場合は、Watchifyモジュールを参照して生成したJavaScriptオブジェクトを、Browserifyのプラグインとしてリスト9(3)のように指定します。なおWatchifyのドキュメントでは(1)、(2)のようにキャッシュ指定を記述するよう指示されています。

リスト9 WatchifyをBrowserifyのプラグインとして設定
var watchify = require("watchify");
var b = browserify({
    cache: {},          // ...(1)
    packageCache: {},   // ...(2)
    plugin: [watchify]  // ...(3)
});

Browserifyのイベント処理

 Browserifyオブジェクトが処理を行うとき、内容に応じたイベントが発生します。主なイベントを表2に示します。このうちupdateイベントはWatchifyをプラグインに指定したときのみ発生します。

表2 browserifyコマンドラインオプション(一部)
イベント名 発生タイミング
bundle 変換処理が行われたとき
file 変換対象ファイルが読み込まれたとき
update Watchifyがファイルの変更を検出したとき

 これらのイベントはBrowserifyオブジェクトのonメソッドで処理を指定できます。具体的な記述方法は後述のgulp連携サンプルで説明します。


  • LINEで送る
  • このエントリーをはてなブックマークに追加

バックナンバー

連載:HTML/JavaScript開発作業を効率化する便利ツールの活用

もっと読む

著者プロフィール

  • WINGSプロジェクト  吉川 英一(ヨシカワ エイイチ)

    <WINGSプロジェクトについて> 有限会社 WINGSプロジェクトが運営する、テクニカル執筆コミュニティ(代表 山田祥寛)。主にWeb開発分野の書籍/記事執筆、翻訳、講演等を幅広く手がける。2018年11月時点での登録メンバは55名で、現在も執筆メンバを募集中。興味のある方は、どしどし応募頂...

  • 山田 祥寛(ヤマダ ヨシヒロ)

    静岡県榛原町生まれ。一橋大学経済学部卒業後、NECにてシステム企画業務に携わるが、2003年4月に念願かなってフリーライターに転身。Microsoft MVP for ASP/ASP.NET。執筆コミュニティ「WINGSプロジェクト」代表。 主な著書に「入門シリーズ(サーバサイドAjax/XM...

あなたにオススメ

All contents copyright © 2005-2022 Shoeisha Co., Ltd. All rights reserved. ver.1.5