ES6 模块和 CommonJS 的区别

CommonJs 模块：

javascript

// a.js
let num = 0
function changeNum() {
  num++
}

module.exports = {
  num, // num是一个原始类型的值,0
  changeNum,
}

// a.js
let num = 0
function changeNum() {
  num++
}

module.exports = {
  num, // num是一个原始类型的值,0
  changeNum,
}

javascript

// b.js
const app = require('./a.js')

console.log(app.num) // 0
app.changeNum()
console.log(app.num) // 0

// b.js
const app = require('./a.js')

console.log(app.num) // 0
app.changeNum()
console.log(app.num) // 0

ES6 模块：

javascript

// a.js
let num = 0
function changeNum() {
  num++
}

export { num, changeNum }  // num 是一个引用，永远指向 num

// a.js
let num = 0
function changeNum() {
  num++
}

export { num, changeNum }  // num 是一个引用，永远指向 num

javascript

// b.js
import { num, changeNum } from './a.js'

console.log(num) // 0
changeNum()
console.log(num) // 1

// b.js
import { num, changeNum } from './a.js'

console.log(num) // 0
changeNum()
console.log(num) // 1

CommonJS 加载的是一个对象（即module.exports属性），该对象只有在脚本运行完才会生成。而 ES6 模块不是对象，它的对外接口只是一种静态定义，在代码静态解析阶段就会生成。

由于这个特性，使得 CommonJS 加载模块时可以写在代码语句中：

javascript

let data = 1
if (data > 0) {
  const { num } = require('./a.js')
  console.log(num) // 0
}

let data = 1
if (data > 0) {
  const { num } = require('./a.js')
  console.log(num) // 0
}

同样的写法，在 ES6 模块中则会报错，因为它不依赖于代码的执行，而是在静态解析阶段就会生成。

ES6 模块 和 CommonJS 的区别 ​