摘要：一原理與環(huán)境不同，瀏覽器中不支持的主要原因是缺少了以下幾個環(huán)境變量換句話說，打包器的原理就是模擬這四個變量的行為。

本文首發(fā)于知乎專欄：
http://zhuanlan.zhihu.com/starkwang

CommonJS 是一個流行的前端模塊化規(guī)范，也是目前 NodeJS 以及其模塊托管倉庫 npm 使用的規(guī)范，但目前暫無瀏覽器支持 CommonJS 。要想讓瀏覽器用上這些模塊，必須轉(zhuǎn)換格式。

這個系列的文章，我們會一步步完成一個基于 CommonJS 的打包工具，類似于一個簡單版的 Browserify 或者 Webpack 。

與 NodeJS 環(huán)境不同，瀏覽器中不支持 CommonJS 的主要原因是缺少了以下幾個環(huán)境變量：

module

exports

require

global

換句話說，打包器的原理就是模擬這四個變量的行為。

比如我們有一個index.js文件，依賴了module1和module2兩個模塊，并且module1依賴module2：

//index.js
var module1 = require("./module1");
var module2 = require("./module2");

module1.foo();
module2.foo();

function hello(){
    console.log("Hello!");
}

module.exports = hello;

//module1.js
var module2 = require(module2);
console.log("initialize module1");

console.log("this is module2.foo() in module1:");
module2.foo();
console.log("
")

module.exports = {
    foo: function(){
        console.log("module1 foo !!!");
    }
};

//module2.js
console.log("initialize module2");
module.exports = {
    foo: function(){
        console.log("module2 foo !!!");
    }
};

把它放入一個匿名函數(shù)內(nèi)，通過這個匿名函數(shù)注入 require、modules、export、global變量（我們暫時不實現(xiàn)global）

function(module, exports, require, global){
    var module1 = require("./module1");
    var module2 = require("./module2");

    module1.foo();
    module2.foo();

    function hello(){
        console.log("Hello!");
    }
    
    module.exports = hello;
}

現(xiàn)在我們用一個 modules 對象來存入這些匿名函數(shù)：

//modules
{
    "entry": function(module, exports, require, global){
        //index.js
        var module1 = require("./module1");
        var module2 = require("./module2");
        module1.foo();
        module2.foo();
        function hello(){
            console.log("Hello!");
        }
        module.exports = hello;
    },
    "./module1": function(module, exports, require, global){
        var module2 = require("./module2");
        console.log("initialize module1");

        console.log("this is module2.foo() in module1:");
        module2.foo();
        console.log("
")

        module.exports = {
            foo: function(){
                console.log("module1 foo !!!");
            }
        };
    },
    "./module2": function(module, exports, require, global){
        console.log("initialize module2");
        module.exports = {
            foo: function(){
                console.log("module2 foo !!!");
            }
        };
    }
}

下面我們實現(xiàn)一個簡單的 require 函數(shù)：

//這個對象用于儲存已導入的模塊
var installedModules = {};

function require(moduleName) {
    //如果模塊已經(jīng)導入，那么直接返回它的exports
    if(installedModules[moduleName]){
        return installedModules[moduleName].exports;
    }
    //模塊初始化
    var module = installedModules[moduleName] = {
        exports: {},
        name: moduleName,
        loaded: false
    };
    //執(zhí)行模塊內(nèi)部的代碼，這里的 modules 變量即為我們在上面寫好的 modules 對象
    modules[moduleName].call(module.exports, module, module.exports,require);
    //模塊導入完成
    module.loaded = true;
    //將模塊的exports返回
    return module.exports;
}

最后只要把我們上面寫好的 modules 對象以立即執(zhí)行函數(shù)的形式傳入這個 require 函數(shù)就可以了，以下是完整的代碼：

(function(modules){
    //這個對象用于儲存已導入的模塊
    var installedModules = {};
    function require(moduleName) {
        //如果模塊已經(jīng)導入，那么直接返回它的exports
        if(installedModules[moduleName]){
            return installedModules[moduleName].exports;
        }
        //模塊初始化
        var module = installedModules[moduleName] = {
            exports: {},
            name: moduleName,
            loaded: false
        };
        //執(zhí)行模塊內(nèi)部的代碼，這里的 modules 變量即為我們在上面寫好的 modules 對象
        modules[moduleName].call(module.exports, module,         module.exports,require);
        //模塊導入完成
        module.loaded = true;
        //將模塊的exports返回
        return module.exports;
    }
    //入口函數(shù)
    return require("entry");
})({
    "entry": function(module, exports, require, global){
        //index.js
        var module1 = require("./module1");
        var module2 = require("./module2");
        module1.foo();
        module2.foo();
        function hello(){
            console.log("Hello!");
        }
        module.exports = hello;
    },
    "./module1": function(module, exports, require, global){
        var module2 = require("./module2");
        console.log("initialize module1");

        console.log("this is module2.foo() in module1:");
        module2.foo();
        console.log("
")

        module.exports = {
            foo: function(){
                console.log("module1 foo !!!");
            }
        };
    },
    "./module2": function(module, exports, require, global){
        console.log("initialize module2");
        module.exports = {
            foo: function(){
                console.log("module2 foo !!!");
            }
        };
    }
});

事實上，我們短短的這幾十行代碼模仿了 Webpack 的部分實現(xiàn)。但我們依然在使用諸如 "./module1" 這樣的字符串作為模塊的唯一識別碼，這是一個明顯的缺陷，存在多層級文件時，這個名稱很容易沖突。

在 Browserify 或 Webpack 這樣的生產(chǎn)級工具里，一般使用數(shù)字作為函數(shù)的唯一識別碼，例如它可能會把（以 Webpack 為例）：

var module1 = require("./module1");

編譯成：

var module1 = __webpack_require__(1);

我們在這里實現(xiàn)了一個最簡單的 CommonJS 標準的執(zhí)行器，接下來的文章中我們會做以下事情：

1、實現(xiàn) global 變量

2、用 moduleID 替代 moduleName

3、寫一個命令行小工具

4、支持 node_modules 和多層級文件