ES Module 与 npm 概览

这一课你将能做到

1. 说出为什么要把代码拆成多个文件，以及模块边界大概怎么切
2. 看懂并手写最小的 import / export（命名导出）
3. 知道 package.json 与 npm install / npm run 的基本含义

为什么要学

一个 HTML 里塞 2000 行 JS 会失踪。
模块让文件各管一块：工具函数一个文件，页面逻辑一个文件。
npm 是前端世界的「零件市场」：别人写好的库装进项目。

本站 platform 全是模块化 TS/JS；不理解 import，打开仓库会懵。
这一课目标是「混脸熟并能跑通最小例子」，不是背完整生态。

先建立图像

math.js 导出 add
main.js 导入 add 并使用
index.html 用 <script type="module"> 启动 main.js

package.json：项目说明书（依赖哪些包、有哪些脚本）
node_modules：安装下来的零件（通常不手改、不提交仓库）
package-lock.json：锁版本，保证大家装到同一套

词	人话
命名导出	export function add → import { add }
默认导出	export default → import add（无花括号）
依赖	项目运行需要的第三方包
脚本	npm run xxx 触发的命令别名

跟着做

步骤 1：准备三个文件（同目录）

math.js：

// 命名导出：把 add 公开给其他文件
export function add(a, b) {
  return a + b;
}

export function clamp(n, min, max) {
  return Math.min(max, Math.max(min, n));
}

main.js：

// 从相对路径导入；浏览器原生 ESM 常要写 .js 后缀
import { add, clamp } from "./math.js";

console.log("2+3=", add(2, 3));
console.log("clamp 120 →", clamp(120, 0, 100));

const out = document.getElementById("out");
if (out) {
  out.textContent = `add(2,3)=${add(2, 3)}；clamp(120)=${clamp(120, 0, 100)}`;
}

index.html：

<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>ES Module</title>
</head>
<body>
  <p id="out">加载中…</p>
  <!-- 必须 type="module" 才能用 import -->
  <script type="module" src="./main.js"></script>
</body>
</html>

步骤 2：用本地静态服务打开（重要）

直接 file:// 打开有时会因浏览器安全限制失败（CORS / 模块限制）。 任选一种：