WHY IT MATTERS
先用一句白话理解
工程化像工厂流水线：好产品不能依赖某位师傅每次手工发挥。输入相同，构建和检查结果就应该相同；任何不合格步骤都应在出厂前被拦下。
LEARNING OUTCOMES
学完你能做到什么
理解 package.json、依赖范围、锁文件和 SemVer
使用原生 ESM 和 Vite 建立开发、构建与预览流程
配置静态检查、格式化、浏览器目标和 source map
设计职责清晰、依赖方向稳定的前端模块边界
用 CI 自动执行类型、测试、构建和质量门禁
CONCEPT DEEP DIVE
把每个核心概念讲透
不要把知识点当作名词列表。下面每一项都要回到真实项目中回答：它解决什么问题，如何验证，以及在哪些条件下会失效。
Node、npm、package.json、依赖类型和锁文件
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“开发并打包一套无框架 TypeScript 商务组件库，包含设计令牌、主题、类型声明、使用文档、版本记录和持续集成。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
SemVer、升级策略与前端供应链基础
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“开发并打包一套无框架 TypeScript 商务组件库，包含设计令牌、主题、类型声明、使用文档、版本记录和持续集成。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
ESM、开发服务器、HMR、打包与生产构建
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“开发并打包一套无框架 TypeScript 商务组件库，包含设计令牌、主题、类型声明、使用文档、版本记录和持续集成。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
Vite、环境变量、资源处理、浏览器目标与 polyfill
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“开发并打包一套无框架 TypeScript 商务组件库，包含设计令牌、主题、类型声明、使用文档、版本记录和持续集成。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
TypeScript、ESLint、格式化和 CSS 工具
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“开发并打包一套无框架 TypeScript 商务组件库，包含设计令牌、主题、类型声明、使用文档、版本记录和持续集成。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
source map、错误定位和构建产物分析
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“开发并打包一套无框架 TypeScript 商务组件库，包含设计令牌、主题、类型声明、使用文档、版本记录和持续集成。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
领域层、数据层、视图层和组件契约
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“开发并打包一套无框架 TypeScript 商务组件库，包含设计令牌、主题、类型声明、使用文档、版本记录和持续集成。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
Git 分支、Pull Request、Code Review 与 CI/CD
先在浏览器中观察结构、样式、事件、网络和渲染行为。把这个概念放回“开发并打包一套无框架 TypeScript 商务组件库，包含设计令牌、主题、类型声明、使用文档、版本记录和持续集成。”中，回答它解决了什么问题、依赖哪些输入、会在哪些边界失效。
CONCEPT MAP
这一章的学习步骤
新环境一次安装即可复现开发和构建结果
依赖升级后能解释变更风险并完成验证
把一个耦合模块拆成单向依赖的清晰边界
在合并前自动执行全部质量门禁
HANDS-ON PROJECT
动手任务
开发并打包一套无框架 TypeScript 商务组件库，包含设计令牌、主题、类型声明、使用文档、版本记录和持续集成。
交付清单
- ✓可安装并可 tree-shaking 的组件包
- ✓组件 API、主题和无障碍使用文档
- ✓锁文件、版本策略和变更日志
- ✓执行类型检查、测试和构建的 CI 流程
DELIBERATE PRACTICE
三级练习：从复现到生产
每一级都比上一级少一点提示、多一点约束。只有在不看答案也能完成验收时，知识才真正变成能力。
让核心机制第一次跑通
- 新环境一次安装即可复现开发和构建结果
- 依赖升级后能解释变更风险并完成验证
- 把一个耦合模块拆成单向依赖的清晰边界
- 在合并前自动执行全部质量门禁
改变约束，验证你真的理解
- 不看教程，独立完成：理解 package.json、依赖范围、锁文件和 SemVer
- 不看教程，独立完成：使用原生 ESM 和 Vite 建立开发、构建与预览流程
- 不看教程，独立完成：配置静态检查、格式化、浏览器目标和 source map
- 不看教程，独立完成：设计职责清晰、依赖方向稳定的前端模块边界
- 不看教程，独立完成：用 CI 自动执行类型、测试、构建和质量门禁
把实验变成能交付的工程
- 可安装并可 tree-shaking 的组件包
- 组件 API、主题和无障碍使用文档
- 锁文件、版本策略和变更日志
- 执行类型检查、测试和构建的 CI 流程
- 检查兼容性、可访问性、性能、安全与渐进增强，并把检查结果写进项目复盘。
COMMON PITFALLS
最容易踩的坑
因为流行就引入工具，却说不清它解决什么问题
随意删除锁文件，导致不同环境安装结果不同
把密钥放进前端环境变量或构建产物
公共模块反向依赖具体页面，形成循环依赖
SELF CHECK
先回答，再展开参考答案
Q01这一课最核心的业务目标是什么？＋
工程化的目的不是堆工具，而是让开发、检查、构建和发布过程可复现。你会围绕一个 TypeScript 组件包搭建依赖、规范、构建、版本和持续集成流程。
Q02如果只能保留三个验收结果，应该保留什么？＋
可安装并可 tree-shaking 的组件包；组件 API、主题和无障碍使用文档；锁文件、版本策略和变更日志
Q03学习过程中最需要主动避免什么？＋
因为流行就引入工具，却说不清它解决什么问题；随意删除锁文件，导致不同环境安装结果不同；把密钥放进前端环境变量或构建产物；公共模块反向依赖具体页面，形成循环依赖
Q04怎样证明你不是“看懂了”，而是真的会做？＋
独立完成“开发并打包一套无框架 TypeScript 商务组件库，包含设计令牌、主题、类型声明、使用文档、版本记录和持续集成。”，并用测试、数据或运行结果逐项验收交付清单。
本课完成检查表
全部能打勾，再进入下一课。
- □目标明确：理解 package.json、依赖范围、锁文件和 SemVer
- □核心机制已用最小实验验证：新环境一次安装即可复现开发和构建结果
- □风险已检查：因为流行就引入工具，却说不清它解决什么问题
- □风险已检查：随意删除锁文件，导致不同环境安装结果不同
- □风险已检查：把密钥放进前端环境变量或构建产物
- □风险已检查：公共模块反向依赖具体页面，形成循环依赖
- □交付物可复现：可安装并可 tree-shaking 的组件包
- □交付物可复现：组件 API、主题和无障碍使用文档
- □交付物可复现：锁文件、版本策略和变更日志
- □交付物可复现：执行类型检查、测试和构建的 CI 流程
PRIMARY SOURCES
继续深入的官方资料
课程版本基线：2026 年 7 月。涉及版本号时，以链接中的官方文档为最终依据。