ES Modules（ESM）是现代JavaScript标准模块系统，浏览器需type="module"且通过HTTP访问、路径带扩展名；Node.js需package.json设"type":"module"或用.mjs后缀；导出导入须严格匹配；生产环境推荐Vite/Webpack打包兼容旧浏览器并处理CommonJS依赖。
ES Modules（ESM）是现代 JavaScript 的标准模块系统，配置方式取决于运行环境——浏览器和 Node.js 的要求不同，不能混用。核心在于让运行时识别并正确加载 import 和 export 语法。
浏览器中启用 ESM：两个硬性前提
在 HTML 页面里使用 ESM，必须同时满足：
-
script 标签加
type="module"：例如<script type="module" src="main.js"></script>；不加会报Cannot use import statement outside a module -
通过 HTTP/HTTPS 服务访问页面：直接双击打开
file://协议的 HTML 文件，浏览器会拒绝加载 ESM 模块（安全限制） - 导入路径需带扩展名：如
import { foo } from './utils.js'，不能省略.js（浏览器不支持自动解析）
Node.js 中启用 ESM：两种等效方式
Node.js 默认按 CommonJS 解析，启用 ESM 需显式声明：
-
方式一：在
package.json中设置"type": "module"这样所有.js文件都按 ESM 处理，无需改后缀 -
方式二：使用
.mjs后缀 如index.mjs、utils.mjs，Node.js 自动识别为 ESM，无需修改package.json
注意：两种方式互斥，选其一即可；若项目已存在 CommonJS 文件，建议统一用方式一并逐步迁移。
立即学习“Java免费学习笔记（深入）”；
导出与导入写法要匹配
ESM 的语法是静态的，导出和导入必须严格对应：
- 命名导出（可多个）：
export const a = 1; export function b() {}→ 导入用import { a, b } from './x.js' - 默认导出（仅一个）：
export default function() {}→ 导入用import xxx from './x.js'（无大括号） - 混合导入：
import def, { named } from './x.js' - 动态导入：
const mod = await import('./x.js')可在函数或条件中使用，但需用try/catch处理失败
构建工具不是必须，但推荐用于生产
纯 ESM 在开发阶段可行，但上线前通常需要处理兼容性问题：
- 旧版浏览器不支持
type="module"，需用 Vite/Webpack 打包转成兼容格式 - 第三方 npm 包多为 CommonJS，直接
import可能失败，打包器可自动转换 - Tree-shaking（移除未用代码）依赖 ESM 的静态结构，只有原生 ESM 或经打包器处理的代码才能生效
