ES6 模塊與 CommonJS 模塊的差別

ES6 模塊與 CommonJS 模塊徹底不一樣。它們有兩個重大差別

CommonJS 輸出是值的拷貝，即原來模塊中的值改變不會影響已經加載的該值，ES6靜態分析，動態引用，輸出的是值的引用，值改變，引用也改變，即原來模塊中的值改變則該加載的值也改變。
CommonJS 模塊是運行時加載，ES6 模塊是編譯時輸出接口。
CommonJS 加載的是整個模塊，即將全部的接口所有加載進來，ES6 能夠單獨加載其中的某個接口（方法），
CommonJS this 指向當前模塊，ES6 this 指向undefined
CommonJS 模塊輸出的是一個值的拷貝，ES6 模塊輸出的是值的引用。

CommonJS 模塊輸出的是值的拷貝，也就是說，一旦輸出一個值，模塊內部的變化就影響不到這個值。ES6 模塊的運行機制與 CommonJS 不同。JS 引擎對腳本靜態分析的時候，遇到模塊加載命令import，就會生成一個只讀引用。等到腳本真正執行時，再根據這個只讀引用，到被加載的那個模塊裏面去取值。ES6 模塊不會緩存運行結果，而是動態地去被加載的模塊取值，而且變量老是綁定其所在的模塊。

例子

CommonJs模塊化：

// lib.js
var counter = 3;
function incCounter() {
  counter++;
}
module.exports = {
  counter: counter,
  incCounter: incCounter,
};
// main.js
var mod = require('./lib');
 
console.log(mod.counter);  // 3
mod.incCounter();
console.log(mod.counter); // 3

ES6模塊化

// lib.js
export let counter = 3;
export function incCounter() {
  counter++;
}
 
// main.js
import { counter, incCounter } from './lib';
console.log(counter); // 3
incCounter();
console.log(counter); // 4

Tips:

從上面咱們看出，CommonJS 模塊輸出的是值的拷貝，也就是說，一旦輸出一個值，模塊內部的變化就影響不到這個值。而ES6 模塊是動態地去被加載的模塊取值，而且變量老是綁定其所在的模塊。

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

目前階段，經過 Babel 轉碼，CommonJS 模塊的require命令和 ES6 模塊的import命令，能夠寫在同一個模塊裏面，可是最好不要這樣作。由於import在靜態解析階段執行，因此它是一個模塊之中最先執行的。