Browserify

http://browserify.org/ https://gyazo.com/291b0ec8ab3fcc9d720542b5e355b7bc

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

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

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

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

利用例

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

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

coffee-reactifyやbabelifyなど、ナントカfyという名前でnpmに公開されている

browserifyへ入る前後にフィルタをかけてくれる

-transformオプションに名前を渡すと動く

-debugオプションでsourcemap埋め込んでくれる

こんな感じでnpmたくさん読み込んでも元ファイルの名前と行数がちゃんとエラーに出る

https://gyazo.com/de7a020c811351f2534324cae9c7c0c0

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") );