ESM 和 CJS 的区别

2023-06-25 18:30:40

输出不同

ESM 输出的是值的引用，而 CJS 输出的是值的拷贝

我们在一个文件中导出了一个变量 count 和一个增加 count 的函数，然后在另一个文件中引入

export let count = 1

export function add() {
  count++
}

// 另一个文件中
import { age, add } from './utils.js'

// 执行 add
add()

console.log(count) // 结果为2

而在 CJS 中结果是这样的

let count = 1

function add() {
  count++
}
module.export = {
  count,
  add
}

// 另一个文件中
const { age, add } = require('./utils.js')

// 执行 add
add()

console.log(count) // 还是1

ESM 在调用方法修改模块中的值后，引用这个值的地方也随着改变，而 CJS 在调用方法后，并没有随着改变，就是因为 CJS 输出的是一个值的拷贝，而 ESM 输出的是值的引用。

由于 ESM 是输出值的引用，所以不允许在外部直接修改值（对象修改或新增属性除外），否则报错

严格模式

ESM 默认是严格模式，而 CJS 默认是非严格模式。

同步异步

ESM是顶层await的设计，而require是同步加载，所以require无法导入ESM模块，但是可以通过import()导入。