Browserify: 使nodejs模塊能夠在瀏覽器下使用

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方法。