瀏覽器載入 CommonJS 模組的原理與實現

阮一峰發表於2015-05-23
瀏覽器JS

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 < 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 屬性值輸出。

三、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），就透過立即執行函式提供即可。

（完）

相關文章