Browserifyを使ってみた、browserify-shimも

今さらながらbrowserifyを使ってみました。存在は知っていたものの普段はcdnを使ってライブラリを読み込むようにしていたので、必要性を感じていませんでした。今回、ライブラリをローカルに保存したかったので使ってみました。 bowerと比較してnpmだけで済むのがいいです。

しかし、npm上のライブラリが対応しているかどうか分からないというのは難点ですね。実際に使おうとしていたライブラリがうまくラップしていないものがありました。そこで、browserify-shimを使いました。これは、CommonJSでexportしていないライブラリをexportしたかのように使えるようにするものです。関連して、napaを思い出しました。うまくやればnapaとbrowserify-shimの組み合わせは最強ではないでしょうか。

browserify-shimの使い方はあまり検索しても見つからなかったので、メモしておきます。基本的にはREADMEに書いてあるのがそのままなのですが、一瞬理解しにくかったです。

以下、package.jsonの中身の書き方です。まず、

{ 
  "browserify": {
    "transform": [ "browserify-shim" ]
  }
}

これが必須です。これにより、browserify-shimが認識されるようです。 transformは他にも用途があるのでしょうか。それも興味あります。次に、

{
  "browserify-shim": {
    "./node_modules/foo/bar.js": { "exports": "Bar" }
  }
}

これはどのファイルのどのようにラップするのかを記述します。詳細は調べていませんが、これはbar.jsのファイルの最後に

exports = Bar;

を追加したような感じです。もちろん、function(){}でスコープを切っているでしょうが。さて、一番悩んだのは、どうやってこれを利用するかでした。状況としては、./public/javascripts/hoge.jsというファイルでどのように使うかというものです。これは、

var bar = require('../../node_modules/foo/bar.js');

としたら動きました。パスが違うのが曲者です。

改めて、これはnapaと組み合わせると便利かもしれません。最近自分でよく使っているcdnとhttp://rawgit.com/の組み合わせに匹敵するかも。

5/13追記。

よりよい設定方法が分かりました。というか単にbrowserify自体の設定方法をよく理解していなかっただけでした。 package.jsonを、

{ 
  "browserify": {
    "transform": [ "browserify-shim" ]
  },
  "browser": {
    "bar": "./node_modules/foo/bar.js"
  },
  "browserify-shim": {
    "bar": { "exports": "Bar" }
  }
}

のように書けば、

var bar = require('bar');

として利用することができました。分かってしまえば簡単なのですが、browserify-shimのドキュメントだけでは理解できなかったです。

SundayHacking

Browserifyを使ってみた、browserify-shimも

コメント