CommonJS 与 ES6 Module 的区别

这两者的主要区别主要有以下两点：

1. 对于模块的依赖，CommonJS是动态的，ES6 Module 是静态的
2. CommonJS导入的是值的拷贝，ES6 Module导入的是值的引用

exports和module.exports

//首先明白
exports === module.exports //true
//也就是说他们指向同一个地址
//相当于
let module = {
  exports:{
    ...
  }
}
let exports = module.exports

export和export default

//export.js
export default function App() {}
class Clock extends React.Component {};
const a = 1;
export { Clock, a}

//import.js
import App, {Clock as Clock1,a} from './export.js';

区别一

对于模块的依赖，何为动态？何为静态？ 动态是指对于模块的依赖关系建立在代码执行阶段； 静态是指对于模块的依赖关系建立在代码编译阶段； 上文提到，CommonJS导入时，require的路径参数是支持表达式的，例如

// A.js
let fileName = 'example.js'
const bModule = require('./' + fileName)

因为该路径在代码执行时是可以动态改变的，所以如果在代码编译阶段就建立各个模块的依赖关系，那么一定是不准确的，只有在代码运行了以后，才可以真正确认模块的依赖关系，因此说CommonJS是动态的。 那么现在你也应该也知道为什么 ES6 Module 是静态的了吧

区别二

为了验证这一点，我准备用实例来演示一下 首先来验证CommonJS，代码如下

// B.js
let count = 3
function change() {
    count ++    // 变量count + 1
    console.log('原count值为：', count);  // 打印B.js模块中count的值
}
module.exports = {
    count,
    change
}
// A.js
let count = require('./B.js').count 
let change = require('./B.js').change
console.log('改变前：', count);   
change()     // 调用模块B.js中的change方法，将原来的count + 1
console.log('改变后：', count); 
// 运行A.js文件的结果
改变前：3
原count值为：4
改变后：3

在上述代码中我们可以看到，在A.js文件中导入了B.js文件中的变量count和 函数change，因为导入的count只是对原有值的一个拷贝，因此尽管我们调用了函数change改变了B.js文件中变量count的值，也不会影响到A.js文件中的变量count 根据这个结果得出结论：CommonJS导入的变量是对原值的拷贝 接下来再来验证一下ES6 Module，代码如下

// B.js
let count = 3
function change() {
    count ++        // 变量count + 1
    console.log(count);   // 打印B.js模块中count的值
}
export {count, change}
// A.js
import {count, change} from './B.js';
console.log('改变前：',count);
change()         // 调用模块B.js中的change方法，将原来的count + 1
console.log('改变后：', count);
// 运行A.js文件的结果
改变前：3
原count值为：4
改变后：4

相比较于CommonJS的结果，ES6 Module导入的变量count随着原值的改变而改变了 根据这个结果得出结论：ES6 Module导入的变量是对原值的引用