es modules 的核心是静态性契约而非动态加载，要求顶层声明、字面量路径、type="module"标签；动态import()用于按需加载；需关注package.json的"exports"/"module"/"main"字段；组件化需严格约束导出边界。
精通 ES Modules 不是死记语法，而是理解它在现代前端链路中的角色边界和失效条件。关键在于把 import/export 当作“契约声明”，而非“加载指令”——它定义的是“谁可以访问什么”，而不是“什么时候去拿”。
抓住静态性这个底层铁律
ESM 的所有行为都源于“编译期可静态分析”这一前提。这意味着：
- 所有 import/export 必须出现在顶层作用域，不能包裹在 if、for 或函数里
- 模块路径必须是字符串字面量，不能拼接变量或使用模板字符串，比如
import(`./${name}.js`)直接报错 -
import * as ns from './utils.js'会阻断 Tree Shaking，除非后续代码明确访问ns.xxx - 浏览器中使用 ESM，
<script></script>标签必须带type="module"，否则 import 语句被忽略或报错
用动态导入精准控制加载时机
import() 不是 ESM 的补丁，而是策略开关。它解决的是静态图谱无法覆盖的场景：
- 返回 Promise，适合配合
async/await做按需加载，比如点击按钮才载入图表组件 - Vite 默认将每个
import('./Chart.js')打包成独立 chunk，无需额外配置 - 它不破坏静态依赖图：构建工具仍能识别模块关系，只是把“执行时机”推迟到运行时
- 避免高频调用，比如在循环中反复
import()，容易触发大量并发请求
看清 npm 包到底暴露了什么
你 import 的不是文件，而是 package.json 声明的入口协议。重点看这三个字段：
-
"main"：CommonJS 入口，Node 或旧构建器常用 -
"module"：ESM 入口，Vite/Rollup 优先读取 -
"exports"：现代标准，可为不同环境（import/require）指定不同路径 - 如果 Vite 报
"default is not exported"，大概率是包只提供了 CommonJS 格式，没声明 ESM 入口，或缺少转换插件
在组件化中用模块边界约束协作
模块边界不是目录结构自动形成的，而是靠导出策略和导入习惯共同定义：
- 组件文件只导出稳定接口：类、渲染函数、常量枚举；不导出内部工具函数或未封装的 DOM 操作
- 禁止
import * as Button from './Button.js'，强制使用具名导入或默认导入 - 组件库统一通过
index.jsre-export，且只暴露公共能力，不透出utils或__internal__内容 - 用 ESLint 插件（如
import/no-unused-modules）自动检测未使用的导出，从工程上守住边界
