# 为什么 Vue、React、Nuxt 都用 ESM？
因为打包工具喜欢 ESM。
例如：
import { ref } from 'vue'
1
如果你没用：
computed
watch
reactive
1
2
3
2
3
打包器可以直接删除。
最终：
包更小
速度更快
1
2
2
这叫：
Tree Shaking
1
CommonJS 很难做到。
# Node.js 现在是什么情况
现代 Node.js 两种都支持。
CommonJS模式
package.json
{
"type": "commonjs"
}
1
2
3
2
3
或者省略：
{}
1
默认就是：
require()
module.exports
1
2
2
ESM模式
package.json
{
"type": "module"
}
1
2
3
2
3
然后：
import fs from 'fs'
export default {}
1
2
2
都能直接使用。
# 实际开发怎么选
Vue/Nuxt/Vite
用：
export default
import
1
2
2
即：
ESM
1
React/Next
用：
export default
import
1
2
2
即：
ESM
1
Node.js 新项目
推荐：
{
"type": "module"
}
1
2
3
2
3
使用：
import
export
1
2
2
即：
ESM
1
老 Node.js 项目
很多还在：
require()
module.exports
1
2
2
即：
CommonJS
1
# 一句话记忆
CommonJS = Node.js 早期自创模块规范
require + module.exports
ESM = JavaScript 官方模块规范
import + export
现在前端几乎全部使用 ESM，
Node.js 新项目也推荐 ESM，
CommonJS 主要用于兼容历史项目。
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
所以你看到：
export default {}
1
基本可以直接判断：
这是 ESM 模块写法
常见于：
✓ Vue
✓ Nuxt
✓ React
✓ Next
✓ Vite
✓ 现代 Node.js
不是传统 CommonJS 写法
1
2
3
4
5
6
7
8
9
10
2
3
4
5
6
7
8
9
10