CommonJS 与 ES6 Module 的区别

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

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

区别一

对于模块的依赖，何为动态？何为静态？

动态是指对于模块的依赖关系建立在代码执行阶段； 静态是指对于模块的依赖关系建立在代码编译阶段；

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导入的变量是对原值的引用

commonjs 模块输出的是值的拷贝，而 ES6 输出的值是值的引用
commonjs 是在运行时加载，是一个对象，ES6 是在编译时加载，是一个代码块
commonjs 的 this 指向当前模块，ES6 的 this 指向 undefined