commonjs模塊和es6模塊的區別？

commonjs模塊和es6模塊最主要的區別：commonjs模塊是拷貝，es6模塊是引用，但理解這些，先得理解對象復制的問題，在回過頭來理解這兩模塊的區別。

一、基本數據類型的模塊

./a1.js es6模塊

export var a1 = 1;
setTimeout(() => a1 = 2, 500);

./a2.js commojs模塊

var a2 = 2;	
module.exports = a2;

setTimeout(() => a2 = 3 ,500);

./index.js 輸出

import { a1 } from './a1';
const a2 = require('./a2');

setTimeout(() => console.log(a1, a2), 1000); // 2,2

現在修改一下./index.js

import { a1 } from './a1';
// const a2 = require('./a2');

// a1 = 1; //編譯報錯
var a2 = require('./a2');
a2 = 'a2';

setTimeout(() => console.log(a1, a2), 1000); // 2 'a2'

得出結論是：es6模塊是引用，且只存在只讀狀態，不能修改其變量值（說的更准確點，不能修改其變量的指針指向，但可以改變內部指針指向，在復雜數據類型的模塊會講解）；commonjs是拷貝，且能修改其值（者就叫修改指針指向），至於是深拷貝還淺拷貝，也會在在復雜數據類型的模塊會講解。

一、復雜數據類型的模塊

./a1.js es6模塊

export const person = {
	name: 'lc',
	friends: ['xm','xh']
};
setTimeout(() => person.name ='liangcheng', 500);

./a2.js commojs模塊

var dog = {
	name: 'xsz', // 不要猜測是誰的名字
	owner: ['lc']
};
module.exports = dog;

setTimeout(() => dog.name = 'xushizhou' ,500);

./index.js 輸出

import { person } from './a1';
const dog = require('./a2');

setTimeout(() => console.log(person.name, dog.name), 1000); //liangcheng xushizhou

得到結論：兩者都動態修改其內屬性或者元素的值，也就是說commonjs是淺拷貝。

總結一下：

es6模塊的特點：

1. 靜態化，必須在頂部，不能使用條件語句，自動采用嚴格模式
2. treeshaking和編譯優化，以及webpack3中的作用域提升
3. 外部可以拿到實時值，而非緩存值(是引用而不是copy)

es6模塊和commonjs模塊的區別：

1. 可以對commonjs模塊重新賦值，對es6模塊重新賦值會編譯報錯
2. commonjs是對模塊的拷貝（淺拷貝），es6是對模塊的引用（也就是說，es6模塊只存只讀，不能改變其值，具體點就是指針指向不能變，類似const）

es6模塊和commonjs模塊的相同點：

1. 兩者都可以對對象內部屬性的值進行改變