428 字
2 分钟
前端工程化 · 路线总览
NOTE本系列共 12 篇，是我从”能跑就行”到”可协作、可发布”这十年里，逐渐补上的工程课。工具会变，但”为什么要这套机器”不变。
工程化解决什么
个人写 demo 不需要工程化。但团队规模一大，问题全来了：依赖版本不一致、代码风格打架、提交带 bug、构建慢、发布手抖。工程化就是用工具和流程，把”人容易出错”的环节变成”机器可靠执行”。
前端工程化
├── 依赖与模块化│ ├── 包管理器（npm/yarn/pnpm）│ ├── 模块化与打包原理│ └── 打包器：Webpack / Vite├── 编译与规范│ ├── Babel 与 TS 编译│ ├── 代码规范（ESLint/Prettier）│ └── Git Hooks 质量门禁├── 交付│ ├── CI/CD│ ├── 构建产物分析与优化│ └── 微前端└── 规模 └── Monorepo我踩过最贵的几个坑
- lockfile 不提交：两人依赖树不同，一个能跑一个白屏，查了两天。
- ESLint 只在 IDE 开着：有人提交一堆格式问题，CI 才发现，来回拉扯。
- 构建没分析：bundle 8MB，首屏 10 秒，用户全跑了。
- Monorepo 盲目上：工具成本高，小团队反而被流程拖死。
怎么读
- 01–04 打地基（依赖、打包原理、两大打包器）。
- 05–07 是”代码变干净、提交变安全”的规范层。
- 08–11 偏规模与交付，按你团队阶段取用。
小结
工程化的目标不是”用最潮的工具”，而是用最低成本挡住最多的错。下一篇从最容易被忽视却最致命的——包管理器与 lockfile 讲起。