Browserify

ブラウザjsでもnpmやnodeライブラリを require("path") で読み込めるようになるツール

jsファイルを静的解析してrequire先を全部1つのファイルに固めてくれる

ファイルが多くなると10秒ぐらいかかる

watchifyから使うとファイル更新を検知して差分だけ再コンパイルできる

利用例

engine.ioのクライアントライブラリ(ブラウザ用)で使われている

transformと呼ばれるプラグインが多数ある

coffee-reactifyやbabelifyなど、 ナントカ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") );