1. 导出：让别的文件能用#

1
export const name = "ESM";              // 命名导出
2
export function hello() { return name; }
3
export default function main() {}        // 默认导出（一个模块只能有一个）

2. 导入：把能力拿过来#

1
import main, { name, hello } from "./export.js";
2
import { hello as hi } from "./export.js";   // 重命名
3
import * as mod from "./export.js";          // 整体导入成对象
4
import("./export.js");                        // 动态导入（返回 Promise）

3. import map：给「裸模块名」指路#

浏览器不认识 import x from "some-lib" 这种裸模块名（它不知道去哪找）。 importmap 就是那张「名字 → URL」的映射表：

1
<script type="importmap">
2
{ "imports": { "some-lib": "/vendor/some-lib.js" } }
3
</script>

这也是 Vite 做依赖预构建的原因之一 —— 它会把裸模块名重写成合法 URL。

4. 与普通脚本的区别#

5. 易错点#

· import 声明会被提升 —— 它总在最前面执行，别指望靠位置控制顺序； · 默认导出 vs 命名导出：默认导出可以随便改名（import x from ...），命名导出必须名字对上； · 循环导入能工作，但拿到的可能是「还没初始化完」的值 —— 尽量别设计成环； · 顶层 await 在模块里合法（普通脚本里不合法）。

参考：MDN · JavaScript modules