Browserify

(2016/04/26〜2016/07/14)
  • ブラウザjsでもnpmやnodeライブラリをrequire("path")で読み込めるようになるツール
  • jsファイルを静的解析してrequire先を全部1つのファイルに固めてくれる
  • ファイルが多くなると10秒ぐらいかかる
  • watchifyから使うとファイル更新を検知して差分だけ再コンパイルできる
  • 利用例

  • engine.ioのクライアントライブラリ(ブラウザ用)で使われている
  • transformと呼ばれるプラグインが多数ある

  • coffee-reactifybabelifyなど、ナントカfyという名前でnpmに公開されている
  • browserifyへ入る前後にフィルタをかけてくれる
  • -transformオプションに名前を渡すと動く
  • SourceMap

  • -debugオプションでsourcemap埋め込んでくれる
  • こんな感じでnpmたくさん読み込んでも元ファイルの名前と行数がちゃんとエラーに出る
  • requireが見つけれる書き方で書かないとbundleしてくれない

  • これはok
  • require("../src/hoge.js");
  • ES6のimportもbabelify使えばok
  • import hoge from "../src/hoge";
  • これもok
  • if(typeof window === "object") require("../src/hoge.js"); // ブラウザでの実行時に読み込み
  • これはfor文を実行してみないとわからないのでダメ
  • for(let i of ["foo", "bar"]){ require(`${i}.js`) }
  • 相対パスで書かないとだめ
  • require( path.resolve("lib/main") );