CommonJS
一開始大家都認為JS是辣雞，沒什么用，官方定義的API只能構建基於瀏覽器的應用程序，CommonJS就按耐不住了，CommonJS API定義很多普通應用程序（主要指非瀏覽器的應用）使用的API，從而填補了這個空白。它的終極目標是提供一個類似Python，Ruby和Java標准庫。這樣的話，開發者可以使用CommonJS API編寫應用程序，然后這些應用可以運行在不同的JavaScript解釋器和不同的主機環境中。
在兼容CommonJS的系統中，你可以使用JavaScript開發以下程序：
(1)、服務器端JavaScript應用程序
(2)、命令行工具
(3)、圖形界面應用程序
(4)、混合應用程序（如，Titanium或Adobe AIR）
2009年，美國程序員Ryan Dahl創造了node.js項目，將javascript語言用於服務器端編程。這標志"Javascript模塊化編程"正式誕生。因為老實說，在瀏覽器環境下，沒有模塊也不是特別大的問題，畢竟網頁程序的復雜性有限；但是在服務器端，一定要有模塊，與操作系統和其他應用程序互動，否則根本沒法編程。NodeJS是CommonJS規范的實現，webpack 也是以CommonJS的形式來書寫。
node.js的模塊系統，就是參照CommonJS規范實現的。在CommonJS中，有一個全局性方法require()，用於加載模塊。假定有一個數學模塊math.js，就可以像下面這樣加載。
var math = require('math');
然后，就可以調用模塊提供的方法：
var math = require('math'); math.add(2,3); // 5
CommonJS定義的模塊分為：{模塊引用(require)} {模塊定義(exports)} {模塊標識(module)}
require()用來引入外部模塊；exports對象用於導出當前模塊的方法或變量，唯一的導出口；module對象就代表模塊本身。
下面講講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），就通過立即執行函數提供即可。