前端工具链概览

写完 html-css-essentials 的静态页、在 javascript-core 里跑过模块与异步之后，你会遇到另一类问题：依赖从哪装、代码怎么打包、团队怎么统一风格、上线走哪条流水线。本 track 补全 frontend 路线图的 工具链节点——不重复 JSX 或 CSS 语法，而是让「能写页面」升级为「能维护项目」。

学习目标

• 说清前端工具链各层（包管理、构建、Lint、部署）各自解决什么问题
• 区分「写代码」与「工程化」的分工边界
• 对照 /roadmaps/frontend 的 npm、module-bundlers、eslint 等节点

与 html-css / react 的分工

范围	html-css / javascript-core	react-essentials / nextjs-essentials	frontend-toolchain-essentials
页面结构与样式	✅	组件化 UI	不涉及
语法与模块	✅	假设已会	假设已会
组件、路由、RSC	不涉及	✅	不涉及
package.json、打包、Lint	不涉及	用到但不展开	✅ 本 track
部署与 CI	不涉及	概念提及	✅ 平台选型

原则：语言课教「写什么」；框架课教「怎么组织 UI」；工具链课教「项目怎么跑、怎么协作、怎么上线」。

工具链四层模型

依赖层   → npm / Yarn / pnpm（装什么、锁什么版本）
构建层   → Vite / Webpack / Rollup / esbuild（源码 → 可运行产物）
质量层   → ESLint / Prettier / TypeScript / Biome（风格、错误、类型）
交付层   → Vercel / Netlify / Cloudflare Pages（预览与生产）

不是每个小 demo 都要四层全开：本地 index.html + script 够用；platform 级 或团队协作项目才值得完整工具链。

在本站 stack 中的位置

CodeRoadMap platform 使用 Next.js + TypeScript。读 nextjs-essentials 时，底层已隐含 pnpm/npm、Turbopack/esbuild、ESLint——本 track 帮你 拆开看每一环，改配置或排查构建失败时不至于盲猜。

类型相关深入见 typescript-essentials；React 组件写法见 react-essentials。

选型三问

1. 团队规模：个人练手 vs 多人 PR 是否需要 lockfile 与统一 Lint？
2. 产物形态：SPA、SSR 全栈，还是 npm 库？
3. 部署目标：静态 CDN、Node 服务，还是边缘函数？

练习