18. ESModule 模块化基础

模块化就是把代码拆成多个文件，互相引用，不用全写在一个文件里。

核心两个：
① export——导出，让别的文件能引用
② import——导入，用别人导出的
③ export default——默认导出，一个文件只能有一个

坑：import 路径要写对、type="module" 不能忘、默认导出和命名导出别搞混。

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

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';

// 整个包成api对象
import * as api from './module.js';

如果你漏写了 .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"。

本页重点

export let x = 1;

import { a } from "./m.js";

export default function () {};

import * as m from "./m.js";