ES6模块 和 CommonJS 的区别

遵循的模块化规范不同

模块化规范：即为 JavaScript 提供一种模块编写、模块依赖和模块运行的方案。谁让最初的 JavaScript 是那么的裸奔呢 —— 全局变量就是它的模块化规范。

require/exports 出生在野生规范当中，什么叫作野生规范？即这些规范是 JavaScript 社区中的开发者本身草拟的规则，获得了你们的认可或者普遍的应用。好比 CommonJS、AMD、CMD 等等。import/export 则是名门正派。TC39 制定的新的 ECMAScript 版本，即 ES6（ES2015）中包含进来。

出现的时间不一样

require/exports 相关的规范因为野生性质，在 2010 年先后出生。AMD、CMD 相对命比较短，到 2014 年基本上就风雨飘摇了。一开始你们还比较喜欢在浏览器上采用这种异步小模块的加载方式，但并非银弹。随着 Node.js 流行和 Browsersify 的兴起，运行时异步加载逐渐被构建时模块合并分块所替代。Wrapper 函数不再须要了。 2014 年 Webpack 仍是新玩意，如今已是前端必备神器了。

Browsersify、Webpack 一开始的目的就是打包 CommonJS 模块。

CommonJS 做为 Node.js 的规范，一直沿用至今。因为 npm 上 CommonJS 的类库众多，以及 CommonJS 和 ES6 之间的差别，Node.js 没法直接兼容 ES6。因此现阶段 require/exports 仍然是必要的。出自 ES6 的 import/export 相对就晚了许多。被你们所熟知和使用也是 2015 年以后的事了。 这其实要感谢 babel（原来项目名叫作 6to5，后改名为 babel） 这个神通常的项目。因为有了 babel 将还未被宿主环境（各浏览器、Node.js）直接支持的 ES6 Module 编译为 ES5 的 CommonJS —— 也就是 require/exports 这种写法 —— Webpack 插上 babel-loader 这个翅膀才开始高飞，你们也才能够称 " 我在使用 ES6！ "

这也就是为何前面说 require/exports 是必要且必须的。由于事实是，目前你编写的 import/export 最终都是编译为 require/exports 来执行的。

require/exports 和 import/export 形式不同

require/exports 的用法只有如下三种简单的写法：

const fs = require('fs')
exports.fs = fs
module.exports = fs

而 import/export 的写法就多种多样：

import fs from 'fs'
import {default as fs} from 'fs'
import * as fs from 'fs'
import {readFile} from 'fs'
import {readFile as read} from 'fs'
import fs, {readFile} from 'fs'

export default fs
export const fs
export function readFile
export {readFile, read}
export * from 'fs'

require/exports 和 import/export 本质上的差异

形式上看起来五花八门，但本质上：

1. 不管 CommonJS 仍是 ES6 Module 输出均可以当作是一个具有多个属性或者方法的对象；
2. default 是 ES6 Module 所独有的关键字，export default fs 输出默认的接口对象，import fs from 'fs' 可直接导入这个对象；
3. ES6 Module 中导入模块的属性或者方法是强绑定的，包括基础类型；而 CommonJS 则是普通的值传递或者引用传递。

一、2 相对比较好理解，3 须要看个例子：

// counter.js
exports.count = 0
setTimeout(function () {
  console.log('increase count to', exports.count++, 'in counter.js after 500ms')
}, 500)

// commonjs.js
const {count} = require('./counter')
setTimeout(function () {
  console.log('read count after 1000ms in commonjs is', count)
}, 1000)

//es6.js
import {count} from './counter'
setTimeout(function () {
  console.log('read count after 1000ms in es6 is', count)
}, 1000)

分别运行 commonjs.js 和 es6.js：

➜  test node commonjs.js
increase count to 1 in counter.js after 500ms
read count after 1000ms in commonjs is 0
➜  test babel-node es6.js
increase count to 1 in counter.js after 500ms
read count after 1000ms in es6 is 1

---

1. ES6模块的设计思想，是尽可能的静态化，使得编译时就能肯定模块的依赖关系(“静态优化”)，以及输入和输出的变量。CommonJS和AMD模块，都只能在运行时肯定这些东西(“运行时加载”)。

2. ES6模块不是对象，而是经过export命令显式指定输出的代码，输入时也采用静态命令的形式。
   CommonJS和AMD模块是一个对象。

3. ES6模块加载的机制，与CommonJS模块彻底不一样。CommonJS模块输出的是一个值的拷贝，而ES6模块输出的是值的引用。

   CommonJS模块输出的是被输出值的拷贝，也就是说，一旦输出一个值，模块内部的变化就影响不到这个值。ES6模块是动态引用，而且不会缓存值，模块里面的变量绑定其所在的模块。

4. 处理“循环加载”的方法是不同的，返回的结果也不同。

CommonJS模块的重要特性是加载时执行，即脚本代码在require的时候，就会所有执行。一旦出现某个模块被"循环加载"，就只输出已经执行的部分，还未执行的部分不会输出。

ES6模块是动态引用，若是使用import从一个模块加载变量，那些变量不会被缓存，而是成为一个指向被加载模块的引用，须要开发者本身保证，真正取值的时候可以取到值。