Browserify：瀏覽器加載Node.js模塊
--------------------------------------------------
隨着JavaScript程序逐漸模塊化，在ECMAScript 6推出官方的模塊處理方案之前，有兩種方案在實踐中廣泛采用：一種是AMD模塊規范，針對模塊的異步加載，主要用於瀏覽器端；另一種是CommonJS規范，針對模塊的同步加載，主要用於服務器端，即node.js環境。
Browserify是一個node.js模塊，主要用於改寫現有的CommonJS模塊，使得瀏覽器端也可以使用這些模塊。使用下面的命令，在全局環境下安裝Browserify。
npm install -g browserify
browserify -h //查看幫助信息
browserify --help advanced
example:
------------
//foo.js:
module.exports = function(x){ console.log(x) }
//main.js:
var foo = require('./foo');
foo('hello, browserify~~');
command-line input:
browserify main.js > compiled.js //合並foo.js和main.js並可以用於瀏覽器環境的js
等價命令
browserify main > compiled.js
browserify main.js -o compiled.js
html中<script>標簽引入 <script src="compiled.js"> </script>
example:
------------
我們再看一個在服務器端的backbone模塊轉為客戶端backbone模塊的例子。
先安裝backbone和它所依賴的jQuery模塊。
npm install backbone jquery //一次安裝2個庫?
然后，新建一個main.js文件。
// main.js
var Backbone = require('backbone');
var $ = Backbone.$ = require('jquery/dist/jquery')(window);
var AppView = Backbone.View.extend({
render: function(){
$('main').append('<h1>Browserify is a great tool.</h1>');
}
});
var appView = new AppView();
appView.render();
接着，使用browserify將main.js轉為app.js。
browserify main.js -o app.js
app.js就可以直接插入HTML網頁了。
<script src="app.js"></script>
注意，只要插入app.js一個文件就可以了，完全不需要再加載backbone.js和jQuery了。
> 生成模塊
有時，我們只是希望將node.js的模塊，移植到瀏覽器，使得瀏覽器端可以調用。這時，可以采用browserify的-r參數（--require的簡寫）。
browserify -r through -r ./my-file.js:my-module > bundle.js
上面代碼將through和my-file.js（后面的冒號表示指定模塊名為my-module）都做成了模塊，可以在其他script標簽中調用。
<script src="bundle.js"></script>
<script>
var through = require('through');
var myModule = require('my-module');
/* ... */
</script>
可以看到，-r參數的另一個作用，就是為瀏覽器端提供require方法。