18. ESModule 模块化基础

代码越写越多，全塞一个 js 文件里就成了搅不开的大泥球。模块化就是把代码拆成一个个独立文件，谁要用谁就 import、谁能给就 export——这就是 ESModule（ESM），浏览器自带的标准。

18.1 互动演示（模拟模块导入导出）

浏览器里没法真的 import（下面解释为什么），这里用代码演示导入导出的写法。

18.2 知识点逐条讲解（配合代码）

① 模块化解决什么麻烦

① 不再全局互相污染；② 公共函数抽出来大家复用；③ 谁依赖谁一目了然；④ 多人各写各的文件不打架。

② export 导出：命名导出 + 默认导出

// module.js 这个文件里
export const name = "商城";        // 命名导出：能有好几个
export function calcPrice(price) {
    return price * 0.9;
}
export default function request() { // 默认导出：一个文件只能一个
    console.log("发起请求");
}

③ import 导入四种写法

import request from './module.js';        // 默认导出，名字随便起
import { name, calcPrice } from './module.js'; // 命名导出，要花括号
import request, { name } from './module.js';   // 两种一起写
import * as api from './module.js';        // 整个包成api对象

如果你漏写了 .js 后缀或 ./，就会报错。因为 ESM 要求：① 路径写全 .js；② 本地文件必须带 ./。少一个都加载不到。

④ script type="module" + file:// 跨域坑

<script type="module" src="./main.js"></script>
// 模块脚本必须加 type="module"，里面才能用 import
<script type="module">
    import { calcPrice } from './module.js';
</script>

如果你双击直接打开 html（地址是 file://）跑模块，就会报 CORS 跨域错误。因为 ESM 有同源限制。解决办法：用 VS Code 的 Live Server 或随便起个本地 http 服务再访问——这不是你代码错了。

⑥ X.3 实战：用在哪 / 常见坑 / 怎么解决

① 用在哪：项目拆成多个 js 文件，工具函数一个文件、页面逻辑一个文件，互相 import/export。

② 常见坑：双击 html（file://）打开报 CORS；漏写 .js 后缀或 ./。

③ 怎么解决：用 VS Code Live Server 起 http 服务；导入路径写全 ./xxx.js，script 加 type="module"。

一句话记住：模块化=拆文件互相 import/export；命名导出能有多个、默认导出只能一个；import 默认不加花括号、命名要加；script 要加 type="module"；双击 file:// 会跨域，得用本地服务器。