ES6 模組的設計思想是儘量的靜態化，使得編譯時就能確定模組的依賴關係，以及輸入和輸出的變數。CommonJS 和 AMD 模組，都只能在執行時確定這些東西。比如，CommonJS 模組就是物件，輸入時必須查詢物件屬性。

CommonJS模組

let { stat, exists, readFile } = require('fs');  
上面程式碼 等同於 
let _fs = require('fs'); 
let stat = _fs.stat; 
let exists = _fs.exists; 
let readfile = _fs.readfile;

上面程式碼的實質是整體載入fs模組（即載入fs的所有方法），生成一個物件（_fs），然後再從這個物件上面讀取 3 個方法。這種載入稱為“執行時載入”，
因為只有執行時才能得到這個物件，導致完全沒辦法在編譯時做“靜態優化”。

 

ES6模組

import { stat, exists, readFile } from 'fs';

上面程式碼的實質是從fs模組載入 3 個方法，其他方法不載入。這種載入稱為“編譯時載入”或者靜態載入，即 ES6 可以在編譯時就完成模組載入，
效率要比 CommonJS 模組的載入方式高。當然，這也導致了沒法引用 ES6 模組本身，因為它不是物件。

CommonJS 載入的是一個物件（即module.exports屬性），該物件只有在指令碼執行完才會生成。
而 ES6 模組不是物件，它的對外介面只是一種靜態定義，在程式碼靜態解析階段就會生成。

差異：
1. CommonJS 模組輸出的是值的拷貝，也就是說，一旦輸出一個值，模組內部的變化就影響不到這個值;ES6 模組的執行機制與 CommonJS 不一樣。
 
2. JS 引擎對指令碼靜態分析的時候，遇到模組載入命令import，就會生成一個只讀引用。
等到指令碼真正執行時，再根據這個只讀引用，到被載入的那個模組裡面去取值。
原始值變了，import載入的值也會跟著變首先，就是this關鍵字。

3. ES6 模組之中，頂層的this指向undefined；
4. CommonJS 模組的頂層this指向當前模組，這是兩者的一個重大差異。

 

es6 模組 匯入匯出

1. 第一種方式
// test.js

export  function fc(){
    console.log('fc');
}
export  function fd(){
    console.log('fd');
}

import {fa,fb} from './modules/test.js';

// 引用模組 也可以用 as 重新命名;
import {fa as myname,fb} from './modules/test.js';

// 也可以用*號作為整體載入;
import * as mymodule from './modules/test3.js';


2. 第二種
// test2.js

function t3(){
    console.log('t3');
}
function t4(){
    console.log('t4');
}
let obj = { t2,t3,t4 };

// 一個模組中 export default 只能用一次; 也可以用於具名函式;
export default obj

// 自己定義一個名字來接收 如果想這樣接收，只能通過 export default 來暴露模組;
import mod from './modules/test2.js';