今日は複数の JavaScript を1つにまとめる事のできる Browserify を試してみます。

CommonJS Modules

もともと JavaScript にはファイルをまたがった依存性解決の仕組みがなく、グローバル変数やそれに近い仕組みを使って複数ファイル間で連携をしていました。

最近では ES6 でモジュール機構が導入されました (正確には「される予定です」) が、 Web ブラウザがまだ対応していないため、実際には使うことはできません。

Node.js などで採用されている CommonJS Modules という仕様があるのですが、これもそのままでは Web ブラウザでは使うことができません。

Browserify は CommonJS Modules で書かれた JavaScript を変換し1つにまとめてくれます。

必要な知識

  • Node.js でのモジュールの書き方
  • npm コマンド

インストール

Browserify は npm コマンドでインストールできます。

$ npm install -g browserify

JavaScript を用意

Web ブラウザ向けの JavaScript を Node.js スタイルで書いていきます。

まずは本体である a.js を作成します。

var b = require('./b');

document.body.textContent = b.getText();

中で require(...) として他の JavaScript を利用しています。

使われている b.js も用意します。

exports.getText = function() {
    return 'Hello, Browserify!';
};

export を通して getText() 関数を公開しています。

次は実際にこれらの JavaScript を1つにまとめてみます。

browserify コマンド

Browserify をインストールすると browserify コマンドが使えます。一番シンプルな方法で試してみます。

$ browserify a.js > bundle.js

browserify ${ファイル名} で標準出力に結果が出力されるので、それを保存します。

できた bundle.js はごちゃごちゃしていますが、よく見ると a.js と b.js が含まれていることがわかるはずです。

適当な HTML を用意して確認できます。

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Browserify Test</title>
</head>
<body>
    <script src="bundle.js"></script>
</body>
</html>

まとめ

  • Browserify は CommonJS Modules で書かれた JavaScript を1つにまとめてくれる
  • npm install -g browserify でインストール
  • browserify ${ファイル名} で変換結果が出力される