es modules 是现代 javascript 的标准模块方案,需通过 type="module" 声明、路径须带扩展名或斜杠、命名导出与默认导出语法及导入方式严格对应,node 中启用需设 "type": "module" 或用 .mjs 后缀。

ES Modules 是现代 JavaScript 的标准模块方案,不是“可选技巧”,而是工程落地的基础设施。掌握它,关键不在记语法,而在理解它的行为边界和运行约束。
浏览器里用 ESM 必须加 type="module"
原生浏览器不认 import 和 export,除非明确告诉它这是模块脚本:
-
<script src="main.js" type="module"></script>—— 缺少type="module"会直接报错“Unexpected token 'export'” - 带
type="module"的脚本自动启用严格模式、顶层this为undefined、支持await顶层执行 - 模块脚本默认是 defer 行为:不会阻塞 HTML 解析,且按顺序执行
导出方式决定导入写法
命名导出和默认导出不是风格偏好,而是接口契约:
- 命名导出(
export const foo = ...)必须用花括号导入:import { foo } from './a.js',名字必须完全一致 - 默认导出(
export default function() {...})导入时无花括号,可任意重命名:import myFn from './a.js' - 一个文件可同时有多个命名导出 + 一个默认导出;但不能有多个
export default - 想批量导入所有命名导出?用
import * as utils from './utils.js',然后通过utils.add访问
路径必须带扩展名或斜杠
ESM 的导入路径是严格的字符串字面量,不支持 Node 那样的自动解析规则:
-
import { add } from './math'❌ 报错:找不到模块(浏览器不补.js) -
import { add } from './math.js'✅ 正确 -
import { add } from './math/index.js'✅ 正确(/结尾也行,但必须显式) - 相对路径(
./或../)必须写,不能省略;绝对路径需以/开头(对应站点根目录)
Node.js 中启用 ESM 要满足任一条件
Node 默认仍用 CommonJS,启用 ESM 需显式声明:
- 在
package.json中设置"type": "module",此后所有.js文件按 ESM 解析 - 或把文件后缀改为
.mjs,无需改package.json,Node 自动识别为 ESM - 注意:
require()在 ESM 文件中不可用;import()动态导入可在 CJS 中使用 - 混合项目中,CJS 引入 ESM 模块会自动包装一层
__esModule标记,import()返回 Promise











