How browserify works

browserifyの仕組みに関して調べてみたのでメモ

How browserify works

browserifyはコマンドで指定したソースコードからAbstract syntax treeAbstract syntax tree - Wikipedia による静的解析を行い、コードの中に書かれているrequire()を探す。
ソースコード中にrequire()が存在した場合、ファイル中の module 文字列を元にファイルパスを特定し、更に再帰的にrequire()があるかたどっていく。

各ファイルは、静的に解析され、1つのマップにまとめられた1つのrequire()関数にマッピングされ、1つのjsファイルに結合される。
これは、browserifyによって吐き出されたjsファイルは、完全にself-containedであり、アプリケーションが必要とするすべてのものをオーバーヘッド無しで保持できることを意味する。

why concatenate

browserify はサーバ上で動作するビルドステップです。アプリケーションのすべての依存関係を含んだ単一のbundle fileを生成します。
ここでは、ブラウザ用のモジュールシステムの実装方法を紹介し、各手法のメリット・デメリットについてまとめます。

window glocals

module システムを使う代わりに、各jsファイルがwindow グローバルオブジェクトにプロパティを定義するか、内部の名前空間を利用した実装を行います。このアプローチは、結論から言うとうまくスケールしません。なぜならば、扱うファイルが増えるたびに、すべてのhtmlページに scriptタグを使って各ファイルを読み込む必要があります。
さらに、あるファイル内で、他のファイルで定義されるモジュールを使っている場合、order-sensitiveであり、読み込む順序を意識する必要があります。
これは非常にリファクタリングとメンテナンスがしづらいのがデメリットですが、すべてのブラウザでこのアプローチを取れることと、サーバサイドのツールが必要ないことがメリットになります。