瀏覽器加載 CommonJS 模塊的原理與實現

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

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

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

一、原理

瀏覽器不兼容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 之中，這樣就實現了模塊的加載。

二、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 

可以看到，browerify 將所有模塊放入一個數組，id 屬性是模塊的編號，source 屬性是模塊的源碼，deps 屬性是模塊的依賴。

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

三、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 

使用的時候，先將上面的代碼放入頁面。然后，將模塊放在如下的立即執行函數里面，就可以調用了。

<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），就通過立即執行函數提供即可。

（完）

原文鏈接: http://www.ruanyifeng.com/blog/2015/05/commonjs-in-browser.html