目录
学了 JS 并且用过 Node.js 后，对模块化应该是有所了解和使用了，那么一定见过以下两种模块导入导出的方式
第一种： ES6 Module
// B.js
function show() {
console.log('show方法被执行')
}
export default show
// A.js
import show from './B.js'
show() // show方法被执行
第二种： CommonJS
// B.js
function show() {
console.log('show方法被执行')
}
module.exports = {
show
}
// A.js
const bModule = require('./B.js')
bModule.show() // show方法被执行
以上两种导入导出方法涉及到了两种模块规范，分别是ES6 Module 、CommonJS
本文就来聊聊这两者之间的具体使用与区别
# 1. CommonJS
CommonJS 是 2009 年由 JavaScript 社区提出的包含了模块化的一个标准，后来被 Node.js 所采用并实现，也就是说我们在 Node.js 中用到的模块导入导出都是依照 CommonJS 标准来实现的
# 1.1 导出
我们可以把一个文件看成一个模块，每个模块之间是互相独立的，即不会互相影响。当需要使用到某个模块时，只需在文件中将目标模块导入即可
要想被其它模块导入首先需要导出需要向外暴露的变量或方法，在 CommonJS 中导出的语法有以下两种方式
// B.js
// 定义了函数show
function show() {
console.log('show方法被调用')
}
// 定义了变量count
let count = 3
/*-------------- 导出方法 --------------*/
// 第一种
module.exports = {
show,
count
}
// 第二种
exports.show = show
exports.count = count
上述代码中，两种导出方式是等价的。
第一种导出方式是将需要导出的函数或变量存储到 module.exports 里面，其中 module.exports 原本是一个空对象
第二种导出方式中，exports 在内部其实是指向了 module.exports，所以当我们执行 exports.变量 或 exports.函数 时，其实就相当于把变量或函数存储到 module.exports 中
注意
这里要特别强调的是，在使用第二种导出方式时，不能对 exports 进行重新赋值，否则就将 module.exports 直接全部覆盖了
# 1.2 导入
再来看一下 CommonJS 的导入语法
// A.js
const bModule = require('./B.js');
console.log(bModule.count); // 3
bModule.show(); // show方法被调用
从上述代码中可以看到，CommonJS 是通过 require 方法来导入模块的，其参数为模块文件路径，要特别注意的是，我们导入模块后接收到的其实是一个对象，也就是 module.exports 的值，我们能从该对象中获取到所需的变量或函数
另外，比较特别的是，require 方法还可以接收一个表达式作为参数，代码如下
let fileName = 'B.js';
const bModule = require('./' + fileName);
因此，我们是可以动态的改变并决定模块的加载导入路径的
# 2. ES6 Module
如标题名写的，该模块标准是在 ES6 时才被提出的，此后 JS 才具有了模块化这一特性
# 2.1 导出
在 ES6 Module 中，导出用到了关键字 export ，导出的方式也大致分为两种，分别是命名导出 、默认导出
第一种： 命名导出
// B.js
/*-------- 单个变量或函数导出 ----------*/
export function show() {
console.log('show方法被调用');
}
export let count = 3;
/*-------- 批量导出 ----------*/
function show() {
console.log('show方法被调用');
}
let count = 3;
export { show, count };
上述代码分了两种情况，且这两种写法是等价的
第一种是单个的变量或函数导出，只需要直接在开头使用 export 关键字即可；
第二种情况是批量地把多个变量或函数导出，只需要把它们储存到一个对象中即可
第二种： 默认导出
// B.js
function show() {
console.log('show方法被调用');
}
// 命名导出变量count
export let count = 3;
// 默认导出函数show
export default show;
默认导出是在 export 关键词后面再跟上一个 default 表示导出的该变量或函数是匿名的
注意
一个模块只能默认导出一次，否则就会报错，具体原因会在后面讲解
# 2.2 导入
ES6 Module 的导入用到的关键字是 import ，具体代码如下
// A.js
import { show, count } from './B.js';
show(); // show方法被调用
console.log(count); // 3
ES6 Module 的导入需要用一对 {} 大括号来接收我们需要导入的方法或函数
注意
大括号中的变量或函数名必须与导出时的名称一模一样
那么如果我们想修改导入的变量或函数的名称，可以通过 as 关键词来命名，代码如下
// A.js
import { show as print, count as number } from './B.js';
print(); // show方法被调用
console.log(number); // 3
如果我们要想将所有的变量或函数都导入，可以通过 * 来整体导入，代码如下
import * as bModule from './B.js';
bModule.show(); // show方法被调用
console.log(bModule.count); // 3
* 表示全部的意思，我们将其全部导入，并赋值给 bModule，这样我们就可以通过 bModule 获取想要的变量或对象了
以上所说的都是针对命名导出的变量或函数，那么如何导入一个默认导出的变量或函数呢？
// 将通过 export default 导出的变量导入
import print from './B.js';
print(); // show方法被调用
命名导出的变量都是通过 {} 来接收的，那么去掉 {} ，接收的就是默认导出的变量了，因为导出的变量是匿名的，因此我们可以随意地起个变量名用于接收
补充： 这里特别提一下，与 CommonJS 不同，ES6 Module 的导入文件路径是不支持表达式的
# 3. CommonJS 与 ES6 Module 的区别
这两者的主要区别主要有以下两点：
对于模块的依赖，CommonJS 是动态的，ES6 Module 是静态的 CommonJS 导入的是值的拷贝，ES6 Module 导入的是值的引用
# 3.1 区别一
对于模块的依赖，何为动态？何为静态？
动态是指对于模块的依赖关系建立在代码执行阶段；静态是指对于模块的依赖关系建立在代码编译阶段；
上文提到，CommonJS 导入时，require 的路径参数是支持表达式的，例如
// A.js
let fileName = 'example.js';
const bModule = require('./' + fileName);
因为该路径在代码执行时是可以动态改变的，所以如果在代码编译阶段就建立各个模块的依赖关系，那么一定是不准确的，只有在代码运行了以后，才可以真正确认模块的依赖关系，因此说 CommonJS 是动态的。
那么现在你也应该也知道为什么 ES6 Module 是静态的了吧
# 3.2 区别二
为了验证这一点，我准备用实例来演示一下
首先来验证 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 导入的变量是对原值的引用