为什么需要构建工具
浏览器并不认识你写的全部代码：裸模块 import（如 import vue from "vue"）在浏览器里直接报错；TypeScript、JSX 需要编译；CSS 需要加前缀/压缩；图片需要转 base64 或拷贝。构建工具的存在就是把这些“源码”翻译成浏览器能直接运行的“产物”。
构建的本质是一条流水线：读取入口 → 解析依赖关系（生成依赖图）→ 逐个翻译转换 → 拼接/分包 → 压缩输出到 dist。理解这条流水线，所有工具（webpack/Vite/Rollup/esbuild）都是它的不同实现。
- 构建做四件事：翻译（TS/JSX/新语法）→ 打包（合并模块）→ 优化（压缩/分包）→ 输出静态资源
- 开发时要快（dev server），发布时要小（产物优化）——两个目标催生了不同工具
- 依赖图：从入口出发，import 一层一层找下去，最终每个文件都是一个节点
原理
// 一个 20 行的“玩具打包器”，展示构建的核心流程 import fs from 'fs'; function bundle(entry) { // 1. 读入口文件 let code = fs.readFileSync(entry, 'utf-8'); const modules = []; // 2. 用正则找出 import 语句（真实工具用 AST 解析） code = code.replace(/import\s+(\w+)\s+from\s+['"](.+)['"]/g, (m, name, src) => { modules.push(src); // 收集依赖 return `const ${name} = __require__('${src}')`; // 改写成运行时加载 }); // 3. 包进一个自执行函数（模块隔离） return ` (function () { const __modules__ = { ${modules.map(m => `'${m}': {}`).join(',')} }; function __require__(id) { return __modules__[id]; } ${code} })(); `; } console.log(bundle('main.js')); // 输出打包后的代码骨架
本节要点构建 = 依赖图 + 翻译 + 打包 + 优化；所有工具都是这条流水线的不同实现。
