ESM 和 CJS 的区别
2023-06-25 18:30:40
输出不同
ESM 输出的是值的引用，而 CJS 输出的是值的拷贝
我们在一个文件中导出了一个变量 count 和一个增加 count 的函数，然后在另一个文件中引入
ts
export let count = 1
export function add() {
count++
}
// 另一个文件中
import { age, add } from './utils.js'
// 执行 add
add()
console.log(count) // 结果为21
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
而在 CJS 中结果是这样的
ts
let count = 1
function add() {
count++
}
module.export = {
count,
add
}
// 另一个文件中
const { age, add } = require('./utils.js')
// 执行 add
add()
console.log(count) // 还是11
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
ESM 在调用方法修改模块中的值后，引用这个值的地方也随着改变，而 CJS 在调用方法后，并没有随着改变，就是因为 CJS 输出的是一个值的拷贝，而 ESM 输出的是值的引用。
由于 ESM 是输出值的引用，所以不允许在外部直接修改值（对象修改或新增属性除外），否则报错
严格模式
ESM 默认是严格模式，而 CJS 默认是非严格模式。
同步异步
ESM是顶层await的设计，而require是同步加载，所以require无法导入ESM模块，但是可以通过import()导入。