ESModule是JavaScript原生模块系统，支持命名导出/导入、默认导出/导入、整体导入及动态import()，需type="module"、显式扩展名和严格路径规则。
ESModule（ECMAScript Module）是 JavaScript 原生支持的模块系统，在现代浏览器中可直接使用 export 和 import 语法，无需构建工具即可运行（需服务环境或 type="module"）。关键在于理解导出与导入的对应关系、静态分析特性，以及浏览器对模块路径的严格要求。
基础用法：命名导出与命名导入
一个模块可通过 export 多次导出多个变量、函数或类，导入时需用大括号精确匹配名称：
-
导出写法示例（math.js）：
export const PI = 3.14159;<br>export function add(a, b) { return a + b; }<br>export class Calculator { ... } -
导入写法（main.js）：
import { PI, add, Calculator } from './math.js'; - 导入时可重命名：
import { add as sum } from './math.js';
默认导出与默认导入（每个模块仅一个）
用 export default 暴露主要接口，导入时不加花括号，且可自定义任意名称：
-
导出（utils.js）：
export default function debounce(fn, delay) { ... } -
导入（app.js）：
import debounce from './utils.js'; // 名字任意，如 import myDebounce from './utils.js'; - 也可同时导入默认 + 命名：
import debounce, { throttle } from './utils.js';
统一导入与动态导入
当需要一次性导入所有命名导出，或按需加载模块时：
立即学习“Java免费学习笔记（深入）”；
-
整体导入（namespace import）：
import * as math from './math.js';<br>console.log(math.PI, math.add(2, 3));
-
动态
import()（返回 Promise，支持条件/异步加载）：if (userPrefersAdvanced) {<br> const { renderChart } = await import('./charts.js');<br> renderChart();<br>} - 注意：
import()可用在任何位置（包括函数内、条件中），而静态import必须在模块顶层。
浏览器使用要点与常见问题
直接在 HTML 中启用 ESModule 需满足以下条件：
- 脚本标签必须声明
type="module"：<script type="module" src="main.js"></script> - 所有模块路径必须是相对路径（
./或../）、绝对路径（/assets/foo.js）或完整 URL；不能省略扩展名（如import './utils'❌，应写import './utils.js'✅） - 模块自动启用严格模式，顶层
this是undefined - 模块代码只执行一次，多次
import同一模块仍共享同一实例（单例行为）
