前端工程化阅读地图
前端工程化阅读地图
这篇笔记还在编辑中，内容可能会继续补充、调整或重写。
这套笔记不是工具清单，而是一条把前端项目从“可以运行”演进到“可以长期、安全地交付”的实践路线。阅读时不要追求一次记住所有工具名称，应持续回答三个问题：当前风险是什么、引入这项能力后如何验证风险降低了、为此承担了什么成本。
贯穿项目
建议准备一个包含登录、列表、详情和编辑表单的小型 Web 应用，后文称为 frontend-lab。业务可以很简单，但必须保留真实工程约束：远程 API、异步状态、路由、权限、错误处理和部署环境。
整个系列会逐步为它加入：
- TypeScript、模块系统和包管理器
- 开发服务、生产构建和静态资源处理
- 格式化、Lint、类型检查和 Git Hooks
- 单元、组件、集成与端到端测试
- CI、不可变制品、预览环境和回滚入口
- 性能预算、异常监控和真实用户指标
- 组件库、Monorepo、共享配置和内部脚手架
每一步都应保留独立提交，并在 docs/engineering-log.md 记录决策、验证结果和遗留问题。
三条阅读路径
路径一：建立最小闭环
适合第一次系统学习前端工程化。按以下顺序阅读：
- 前端工程化概览
- 基础与运行时
- 模块、依赖与包管理
- TypeScript
- 构建工具与编译体系
- 工程规范与团队协作
- 测试体系
- CI/CD 与交付
- 学习与实践路线
完成标准不是“读完”，而是能够从一次代码变更生成可部署制品，并让失败在本地或 CI 中留下可定位的证据。
路径二：提升用户体验和运行质量
适合已经能稳定发布项目的读者：
- 样式与静态资源工程
- API 与数据工程
- Web 性能工程
- 前端监控与可观测性
- Web 安全
- 组件库与设计系统
完成后，应能用真实用户数据回答“哪里慢、哪里错、影响了谁”，并能把性能、安全和无障碍要求落实成自动化检查或发布门禁。
路径三：治理大型项目
适合多应用、多包或多团队场景：
- 框架工程与应用架构
- 大型项目与 Monorepo 治理
- 开发体验与工程平台
重点不是采用最多工具，而是建立清晰的所有权、依赖方向、变更边界和反馈机制。
学习节奏
每个主题依次完成四个动作：
- 解释：用自己的话描述问题、机制和不采用时的成本。
- 验证：在最小示例中主动制造成功和失败场景。
- 比较：至少比较两种方案，记录适用边界而不是只列优缺点。
- 迁移：把结论应用到贯穿项目，并用构建日志、测试报告或监控数据证明效果。
阶段验收
- 新机器能按照 README 在 15 分钟内启动项目
- 冻结安装不会修改 lockfile，构建结果可追溯到提交和工具版本
- Pull Request 会自动执行格式、Lint、类型、测试和构建
- 同一制品能够被推广到不同环境，而不是每个环境重新构建
- 关键用户路径有端到端测试，也有错误和性能监控
- 发布失败时能定位版本、查看证据并恢复到上一稳定版本
- 重要技术选择有决策记录，过时内容标明版本范围和迁移入口
下一篇：文章完成标准与维护规则。