瀏覽器加載 CommonJS 模塊的原理與實現 （阮一峯大哥的 http://www.ruanyifeng.com/blog/2015/05/commonjs-in-browser.html）

就在這個週末，npm 超過了 cpan ，成爲地球上最大的軟件模塊倉庫。

npm 的模塊都是 JavaScript 語言寫的，但瀏覽器用不了，由於不支持 CommonJS 格式。要想讓瀏覽器用上這些模塊，必須轉換格式。

本文介紹瀏覽器加載 CommonJS 的原理，而且給出一種很是簡單的實現。

1、原理

瀏覽器不兼容CommonJS的根本緣由，在於缺乏四個Node.js環境的變量。

• module
• exports
• require
• global

只要可以提供這四個變量，瀏覽器就能加載 CommonJS 模塊。

下面是一個簡單的示例。

var module = { exports: {} }; (function(module, exports) { exports.multiply = function (n) { return n * 1000 }; }(module, module.exports)) var f = module.exports.multiply; f(5) // 5000 

上面代碼向一個當即執行函數提供 module 和 exports 兩個外部變量，模塊就放在這個當即執行函數裏面。模塊的輸出值放在 module.exports 之中，這樣就實現了模塊的加載。

2、Browserify 的實現

知道了原理，就能作出工具了。Browserify 是目前最經常使用的 CommonJS 格式轉換的工具。

請看一個例子，main.js 模塊加載 foo.js 模塊。

 // foo.js module.exports = function(x) { console.log(x); };  // main.js var foo = require("./foo"); foo("Hi"); 

使用下面的命令，就能將main.js轉爲瀏覽器可用的格式。

$ browserify main.js > compiled.js 

Browserify到底作了什麼？安裝一下browser-unpack，就能看清楚了。

$ npm install browser-unpack -g 

而後，將前面生成的compile.js解包。

$ browser-unpack < compiled.js [ { "id":1, "source":"module.exports = function(x) {\n console.log(x);\n};", "deps":{} }, { "id":2, "source":"var foo = require(\"./foo\");\nfoo(\"Hi\");", "deps":{"./foo":1}, "entry":true } ] 

能夠看到，browerify 將全部模塊放入一個數組，id 屬性是模塊的編號，source 屬性是模塊的源碼，deps 屬性是模塊的依賴。

由於 main.js 裏面加載了 foo.js，因此 deps 屬性就指定 ./foo 對應1號模塊。執行的時候，瀏覽器遇到 require('./foo') 語句，就自動執行1號模塊的 source 屬性，並將執行後的 module.exports 屬性值輸出。

3、Tiny Browser Require

雖然 Browserify 很強大，但不能在瀏覽器裏操做，有時就很不方便。

我根據 mocha 的內部實現，作了一個純瀏覽器的 CommonJS 模塊加載器 tiny-browser-require 。徹底不須要命令行，直接放進瀏覽器便可，全部代碼只有30多行。

它的邏輯很是簡單，就是把模塊讀入數組，加載路徑就是模塊的id。

function require(p){ var path = require.resolve(p); var mod = require.modules[path]; if (!mod) throw new Error('failed to require "' + p + '"'); if (!mod.exports) { mod.exports = {}; mod.call(mod.exports, mod, mod.exports, require.relative(path)); } return mod.exports; } require.modules = {}; require.resolve = function (path){ var orig = path; var reg = path + '.js'; var index = path + '/index.js'; return require.modules[reg] && reg || require.modules[index] && index || orig; }; require.register = function (path, fn){ require.modules[path] = fn; }; require.relative = function (parent) { return function(p){ if ('.' != p.charAt(0)) return require(p); var path = parent.split('/'); var segs = p.split('/'); path.pop(); for (var i = 0; i < segs.length; i++) { var seg = segs[i]; if ('..' == seg) path.pop(); else if ('.' != seg) path.push(seg); } return require(path.join('/')); }; }; 

使用的時候，先將上面的代碼放入頁面。而後，將模塊放在以下的當即執行函數裏面，就能夠調用了。

<script src="require.js" />

<script>
require.register("moduleId", function(module, exports, require){
  // Module code goes here
});
var result = require("moduleId");
</script>

仍是之前面的 main.js 加載 foo.js 爲例。

require.register("./foo.js", function(module, exports, require){ module.exports = function(x) { console.log(x); }; }); var foo = require("./foo.js"); foo("Hi"); 

注意，這個庫只模擬了 require 、module 、exports 三個變量，若是模塊還用到了 global 或者其餘 Node 專有變量（好比 process），就經過當即執行函數提供便可。