用AI Agent把前端迁移到Vite+React：modern-software-dev-assignments week5最复杂任务攻略-平芜编程栈

用AI Agent把前端迁移到Vite+React：modern-software-dev-assignments week5最复杂任务攻略

【免费下载链接】modern-software-dev-assignmentsAssignments for CS146S: The Modern Software Dev (Stanford University Fall 2026/2025)项目地址: https://gitcode.com/GitHub_Trending/mo/modern-software-dev-assignments

本文带你用 AI Agent 完成 modern-software-dev-assignments 中 week5 最复杂的任务——把前端迁移到 Vite + React。这是斯坦福 CS146S 课程仓库里一个完整的实战案例：FastAPI 后端 + 静态前端的全栈起步项目，目标是用智能体（Agentic）工作流，而不是纯手工改代码，来完成一次真正的前端重构。

为什么这个任务被称为 week5 最复杂任务 🔥

打开任务清单 week5/docs/TASKS.md，11 个任务按难度分级，其中第 1 项 "Migrate frontend to Vite + React" 被明确标记为complex（最复杂）。难在哪里？

难点	说明
构建链改造	原项目是纯静态页面，零 Node 工具链，迁移后要引入 npm 构建流程
静态托管切换	FastAPI 要改为服务`dist/`构建产物，并让根路径`/`返回新的`index.html`
接口全量对接	笔记列表/增删改、待办列表/完成，全部要在 React 组件里重新接线
工具链扩展	week5/Makefile 要新增`web-install`、`web-dev`、`web-build`目标
测试补齐	至少 2 个 React 组件测试（Testing Library）+ 后端兼容性集成测试

这正是 AI Agent 的主场：步骤多、模式化、适合拆解执行，但每一步又需要人工把关。

动手前：3 分钟看懂 week5 起步项目

在喂任务给 Agent 之前，先花 3 分钟建立全局认知，这是迁移成功的关键。

后端：week5/backend/app/main.py 只有 30 多行——挂载静态目录/static指向frontend/，根路径/返回frontend/index.html，两个路由分别是笔记和待办
前端：只有三个文件——week5/frontend/index.html、week5/frontend/app.js（约 65 行原生 JS，负责调/notes/和/action-items/接口）以及week5/frontend/styles.css
数据模型：week5/backend/app/models.py 里只有Note和ActionItem两个表，字段一目了然

先跑起来再说：

cd week5 && make run

然后访问http://localhost:8000，亲眼确认现有功能长什么样。这个"基线快照"是后面让 Agent 做行为对比的锚点。

任务拆解：给 AI Agent 的 5 步迁移清单

把 complex 任务拆成 5 个可独立验收的小步骤，每一步 Agent 都能给出明确的"完成/失败"信号：

脚手架：在week5/frontend/下搭建 Vite + React 应用，确认npm run dev能跑
构建产物接线：配置 Vite 输出到week5/frontend/dist/，把 FastAPI 的静态挂载和根路由改到dist（对应 main.py 中的两处挂载）
组件化迁移：把index.html里的 Notes 表单+列表、Action Items 表单+列表改写成 React 组件，接口调用逻辑参照 app.js 现有的 fetch 写法
Makefile 集成：新增web-install/web-dev/web-build目标，让make run前能自动完成构建
测试收尾：补 2 个组件测试 + 后端 API 兼容性测试，跑make test全绿

💡 技巧：让 Agent 每完成一步就停下汇报，而不是"一口气全做完"。迁移类任务最大的风险是 Agent 在后端静默改坏接口——分步验收能第一时间发现。

提示词怎么写：一份可直接复用的迁移 Playbook

week5 的作业要求（见 week5/assignment.md）明确鼓励使用 Warp Drive 的保存提示词（saved prompts）和规则（rules）。一个高效的迁移提示词模板长这样：

角色设定："你是熟悉 FastAPI + Vite + React 的前端工程师"
边界约束："只能修改week5/frontend/、week5/Makefile和week5/backend/app/main.py的静态挂载部分，禁止改动后端业务逻辑"
接口契约：附上现有端点清单——GET/POST /notes/、PUT /action-items/{id}/complete（可从 week5/backend/app/routers/notes.py 和 week5/backend/app/routers/action_items.py 提取）
验收标准："迁移后页面功能与原版逐条一致：新增笔记、新增待办、点击 Complete 按钮，且make test通过"

把这份 Playbook 存成 Warp Drive 的共享提示词，后续 week 的其他任务还能复用，这正是作业 Part I 要求的 "Warp Drive features" 用法。

多 Agent 并行：让多个智能体同时干活 ⚡

week5 的另一项硬要求是multi-agent workflows（多智能体工作流）：在 Warp 的不同标签页开多个 Agent 并发处理TASKS.md里的独立任务。

针对前端迁移场景，推荐的分工策略：

Agent A（主标签页）：负责迁移主链路（脚手架 → dist 接线 → 组件化）
Agent B（副标签页）：负责 Makefile 的web-*目标
Agent C（副标签页）：负责 React Testing Library 组件测试

⚠️ 关键防踩坑措施：并发 Agent 最容易互相覆盖文件。作业文档特意提示可以用git worktree让每个 Agent 在独立工作树里操作，完成后再合并。合并顺序建议：A → B → C，每合一次跑一遍make test。

迁移完成后：测试与验收清单 ✅

Agent 说"完成了"不等于真完成了。用这份清单人工验收：

make run后访问首页，显示的是 React 应用而非旧静态页
笔记的增删改查、待办的新增与完成，行为与原版一致
make test全部通过（后端集成测试 + 前端组件测试）
make format/make lint无报错（项目配了 black + ruff，见 week5/pre-commit-config.yaml）
静态资源路径没有 404（重点检查dist里的 CSS/JS 引用）

最后，把整个过程写进 week5/writeup.md：模板已预留 "Before vs. after"、"Autonomy levels"、"Multi-agent notes" 等小节，记录每个 Agent 的权限级别和你如何监督它——这本身就是课程考察的重点能力。

新手常见坑与避坑指南 🧭

常见坑	避坑方法
Agent 顺手重构了后端接口	在提示词里写死"禁止修改`backend/app/routers/`"
`dist/`路径配置错，页面白屏	让 Agent 给出构建命令的实际输出，人工核对产物路径
根路由仍指向旧`index.html`	验收时直接 curl 首页 HTML 内容确认
多 Agent 冲突，文件互相覆盖	用 git worktree 隔离，小步合并