常見的前端模塊化方法（CommonJS和ES6模塊方法）

一、CommonJS

Node.js是commonJS規範的主要實踐者，它有四個重要的環境變量爲模塊化的實現提供支持：module、exports、require、global。實際使用時，用module.exports定義當前模塊對外輸出的接口（不推薦直接用exports），用require加載模塊。

/** 定義模塊 math.js **/
var basicNum = 0;
function add(a, b) {
  return a + b;
}
module.exports = { //在這裏寫上需要向外暴露的函數、變量
  add,
  basicNum
}

/** 引用模塊 math.js **/

// 引用自定義的模塊時，參數包含路徑，可省略.js
var math = require('./math');
math.add(2, 5);

// 引用核心模塊時，不需要帶路徑
var http = require('http');
http.createService(...).listen(3000);

二、ES6 Module

ES6 Module 其模塊功能主要由兩個命令構成：export和import。export命令用於規定模塊的對外接口，import命令用於輸入其他模塊提供的功能。其實ES6還提供了export default命令，爲模塊指定默認輸出，對應的import語句不需要使用大括號。

/** 定義模塊 math.js **/
var basicNum = 0;
var add = function (a, b) {
    return a + b;
};
export { basicNum, add };

/** 引用模塊 **/
import { basicNum, add } from './math';
function test(ele) {
    ele.textContent = add(99 + basicNum);
}

/** export default **/
//定義輸出
export default { basicNum, add };
//引入
import math from './math';
function test(ele) {
    ele.textContent = math.add(99 + math.basicNum);
}

三、CommonJS與ES6 Module的不同點

1. CommonJS 模塊輸出的是一個值的拷貝，ES6 模塊輸出的是值的引用。

2. CommonJS 模塊是運行時加載，ES6 模塊是編譯時輸出接口。

CommonJS 加載的是一個對象（即module.exports屬性），該對象只有在腳本運行完纔會生成。而 ES6 模塊不是對象，它的對外接口只是一種靜態定義，在代碼靜態解析階段就會生成。