Browserify と browserify-shim でグローバルオブジェクトを扱う
はじめに
script タグや Sprockets で依存関係を管理していたところから Browserify や webpack などの CommonJS ベースのモジュール管理に移行する過渡期に jQuery や jQuery Plugins などのグローバルオブジェクトを Browserify ではどのように扱うのかについて覚えたことをメモしておきます。
CommonJS ベースのモジュール管理については末尾の参考サイトを読んでみてください。
環境
以前に書いた Browserify の記事 Gulp から Watchify と Browserify を使う を参考に、 Gulp と Browserify の環境を用意します。また、グローバルオブジェクトの扱い方については jQuery を使って試します。
npm の jQuery を require する
まずは、シンプルに jQuery を require してみます。これだけであれば特に難しいことはなく、$ npm install --save jquery をして require するだけです。jQuery プラグイン等も基本的には npm にあるものを使っていくのが良さそうです。
var $ = require('jquery');
$(function(){
console.log($('body'));
});
ただ、この手法だと bundle.js に jQuery 本体も含むことになるためファイルサイズが大きくなってしまいます。できればCDNを活用したいところです。
browserify-shim を使ってグローバルオブジェクトを require する
jQuery 本体は別ファイル（CDNを含む）で読み込ませ、グローバルオブジェクト（$）を require できればファイルサイズの問題は少しだけマシになるかもしれません。それを実現するのが browserify-shim です。
browserify-shim は グローバルオブジェクトを require できるモジュールにしてくれます（Shimとは詰め木のこと）。
browserify-shim のインストールと設定
npm から browserify-shim をインストール $ npm install --save-dev browserify-shim します。インストールしたら package.json に browserify-shim を使うためのおまじないを追加します。transform というのは 様々なものを Browserify で扱えるように変換するためのモジュールのことです。これで準備ができました。
"browserify": {
"transform": [ "browserify-shim" ]
},
グローバルオブジェクトをモジュール化する
適当に JavaScript を作成し、hoge というグローバルオブジェクトを用意します。私の場合は面倒なので slim ファイルに script タグを定義しました。
javascript:
var hoge = "HelloWorld!";
package.json に browserify-shim を定義します。グローバルにある hoge オブジェクト（global:hoge）を hoge という名前でモジュールに変換します。
"browserify-shim": {
"hoge": "global:hoge"
},
あとは hoge モジュールを require('hoge') して コンソールに出力してみます。コンソールに HelloWorld! と出力されていれば成功です。
var hoge = require('hoge');
console.log(hoge);
CDN の jQuery を使う
グローバルオブジェクトをモジュール化することで script タグで読み込んだ CDN の jQuery などをモジュールとして require できるようになります。browserify-shim は CDN の JavaScript が グローバルオブジェクトにできるのを待って処理してくれるようになっているのでその点も安心です。
"browserify": {
"transform": [ "browserify-shim" ]
},
"browserify-shim": {
"jquery": "$"
},
require('jquery');
$(function(){
console.log($('body'));
});
カスタムした jQuery を require したい
カスタムした jQuery （不要な機能を省いたりしたもの）を require したいときは Browser field （差し替え）を使います。 Browser field を利用するには package.json に browser field を追加し、差し替える対象ファイルを指定します。
"browserify": {
"transform": [ "browserify-shim" ]
},
"browser": {
"jquery": "./hoge/jquery.js"
},
"browserify-shim": {
"jquery": "$"
},
終わりに
Browserify は CommonJS ベースのモジュール管理に慣れるのにちょうど良いツールな気がしました。比較的小規模なプロジェクトで使いつつ、大規模なプロジェクト向けに webpack を勉強していこうと思います。