综合练习

把 ft-intro 到 ft-bun 串起来：为 CodeRoadMap platform 或自选前端 demo 写一份工具链 README，说明依赖、构建、质量门禁与部署——证明你不仅会写 react-essentials 组件，还能 解释项目怎么跑。

学习目标

• 独立完成从包管理到部署的工具链文档
• 交叉引用本 track 与 html-css-essentials、javascript-core、typescript-essentials、nextjs-essentials
• 能在 README 里画出 install → lint → typecheck → build → deploy 流水线

任务说明

任选 A：分析本站 platform 或 B：新建 Vite + React + TS demo，输出 TOOLCHAIN.md（或 README 一节），包含以下章节。

1. 包管理（ft-npm、ft-yarn-pnpm）

• 使用的包管理器与 lockfile 文件名
• 三条核心 scripts（dev / build / lint 或 typecheck）及作用
• dependencies vs devDependencies 各举 2 个真实包名

2. 构建（ft-bundlers、ft-vite）

• 开发命令与生产 build 命令
• 底层 bundler（Vite / Next Turbopack / Webpack 等）
• 产物目录（dist、.next 等）与是否 SSR

3. 质量门禁（ft-eslint、ft-prettier、ft-typecheck）

• ESLint 配置文件名（flat 或 legacy）
• Prettier 或 Biome 是否启用
• tsc --noEmit 是否在 CI；与 typescript-essentials 的 strict 是否一致

4. 部署（ft-deploy）

• 目标平台（Vercel / 自托管 Docker / 静态 CDN）
• 环境变量约定（哪些可进客户端）
• PR 预览是否有

5. 选型说明（至少 200 字）

回答：

• 为何选 Next 而非纯 Vite SPA（链到 nextjs-essentials）
• 与 html-css-essentials 静态页相比，工具链多解决了哪三个协作问题
• ft-bun 生态是否适合你们团队 现在 切换——给出是/否与一条理由

加分项

• 画 ASCII 或 Mermaid：git push → CI → 部署 → 用户
• 文档内至少 6 条 /tracks/.../lessons/... 链接（含其他 track）
• 若分析 platform：指出一处「esbuild/SWC 转译 vs tsc 类型检查」的分工

毕业清单

• 完成 TOOLCHAIN.md 并自测：同事能否按文档 install + dev
• 通读本 track 12 课
• 在 /roadmaps/frontend 确认 npm、bundler、eslint、deploy 节点
• 登录学员端，标记本 track 最后一课完成

小结

工具链文档是前端工程师的「运维面」——与写组件同等重要。 本 track 完结；继续深化 UI 走 react-essentials 与 nextjs-essentials，深化语言走 javascript-core 与 typescript-essentials。