CodeRoadMap
首页路线题库资源库文章社区
CodeRoadMap

程序员的学习成长路线图。内容免费开放,登录后可同步路线图与课时进度。

由 程序员柏风 独立维护 · 关于作者

学习

  • 路线图
  • 课程
  • 面试题
  • 文章
  • 我

更多

  • 资源
  • 社区
  • 关于作者
  • 内容说明

© 2026 CodeRoadMap

津ICP备2026012044号-1·津公网安备12011002026155号·coderoadmap@126.com
前端工具链入门/课时/综合练习
RawBlame
课时目录12 节

前端工具链入门

  1. 01前端工具链概览
  2. 02npm 与 package.json
  3. 03Yarn 与 pnpm
  4. 04模块打包器
  5. 05Vite / esbuild / SWC
  6. 06Rollup 与 Parcel
  7. 07ESLint
  8. 08Prettier 与 Biome
  9. 09类型检查
  10. 10部署平台
  11. 11Bun 与 Rolldown
  12. 12综合练习

综合练习

为 platform 选工具链并写 README。

40 分钟

综合练习

把 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。

    加载本节练习…
    ← 上一课Bun 与 Rolldown