我用 AI Agent 重构了一个 10 年老项目，从 jQuery 到 React，说说真实体验

我用 AI Agent 重构了一个 10 年老项目，从 jQuery 到 React，说说真实体验

导语

每个前端团队手里大概率都有一两个”碰都不敢碰”的老项目——jQuery + 面条式代码、没有测试、没有文档、甚至连 npm 都没有，全靠 script 标签加载。我手头正好有这么一个后台管理系统，2016 年上线，整整跑了 10 年，业务逻辑堆了 300 多个文件。今年终于下定决心重构，试了三种 AI Agent（Claude Code、OpenCode、Cline）来辅助迁移，整个过程踩了不少坑，也总结了一套可复用的方法，今天全部摊开说。

正文

一、这个项目到底有多”老”？

先看下改造前的”盛况”：

• 技术栈：jQuery 1.12 + Bootstrap 3 + RequireJS + Handlebars 模板
• 构建：没有构建，没有 npm，全靠 Grunt 压缩
• 代码量：327 个 JS 文件，约 18 万行
• 测试覆盖：0%
• 文档：README 里就一句话 “后台管理系统”

这不是最夸张的，最头疼的是业务逻辑全揉在 jQuery 事件回调里，一个 $('.save-btn').click(function(){...}) 可以塞 300 行，里面混着 AJAX 请求、DOM 操作、数据校验和 UI 更新，典型的”回调地狱 + 面条代码”组合。

二、为什么选 AI Agent 来重构？

传统的重构方案无非两条路：重写或渐进式迁移。

重写太冒险——业务逻辑 10 年积累，光理清就要几个月。渐进式迁移虽然稳妥，但有三个痛点很难解决：

1. 理解成本高：没有测试，改一行代码全靠肉眼检查

2. 重复劳动多：AJAX 调用、表单校验、DOM 渲染这些”搬砖”活占了 70%

3. 节奏慢：一个完整模块迁移可能要 2-3 周

AI Agent 正好切中这些痛点——它能”理解”整个代码库、批量做机械替换、还能帮我把 jQuery 写法转成 React 写法。听起来完美，实际呢？下面说。

三、Claude Code 先上：大模型 + 长上下文的威力

我先选了 Claude Code，原因很简单——它支持超长上下文（200K tokens），能一次性加载整个项目。

第一步：项目摸底

直接让 Claude Code 扫描项目：

# 进入项目目录
cd ~/projects/legacy-admin

# 启动 Claude Code
claude

输入指令：

分析这个项目的技术栈、模块划分和代码质量。
给我一份项目概览报告，包含：目录结构、核心依赖、代码坏味道评分。

Claude Code 用了大约 40 秒扫了一遍项目文件，给我的报告让我直冒冷汗——它识别出了 12 种坏味道模式，包括”全局变量污染””多层回调嵌套””AJAX 调用未做错误处理””相同的表单校验逻辑重复了 47 次”等。

核心发现：这个项目虽然乱，但实际上只做了 7 个核心业务功能，80% 的代码是”胶水代码”（数据验证、DOM 渲染、事件绑定）。

第二步：批量模式迁移

我先拿”用户管理”模块做试点。这个模块包含 12 个页面，涉及表单 CRUD、搜索、分页、导出等操作。

对 Claude Code 下指令：

帮我将 src/modules/user/ 目录下所有 jQuery 代码迁移到 React。
约束条件：
1. 使用 React 函数组件和 hooks
2. 用 fetch 替换 $.ajax
3. 数据管理用 React Context + useReducer
4. 保留原有业务逻辑，不改动接口返回格式
5. 每个组件输出独立的 .jsx 文件

Claude Code 的 Agent 模式直接接管了终端——它先读懂了每个文件的逻辑，然后逐个创建对应的 React 组件。整个过程大约 45 分钟，生成了 18 个组件文件和 6 个 hook 文件。

关键体验：最让我意外的是，它不只是机械地把 $.ajax 换成 fetch，而是能理解业务逻辑中的”意图”。比如原代码中有一段：

// jQuery 老代码
$.ajax('/api/users', {
  data: {page: currentPage, size: pageSize},
  success: function(res) {
    var html = '';
    res.data.forEach(function(user) {
      html += '<tr><td>' + user.name + '</td><td>' + user.role + '</td></tr>';
    });
    $('#user-table tbody').html(html);
    $('#pagination').html(renderPagination(res.total));
  }
});

Claude Code 把它改成：

// React 新代码
const fetchUsers = async (page, size) => {
  try {
    setLoading(true);
    const res = await fetch(`/api/users?page=${page}&size=${size}`);
    const data = await res.json();
    setUsers(data.data);
    setTotal(data.total);
  } catch (err) {
    setError(err.message);
  } finally {
    setLoading(false);
  }
};

看出来了吗？它把 AJAX 回调里的”拼接 HTML”改成了”更新状态”，还把错误处理和 loading 状态一并加上了——这是人对代码的”理解”，不只是字符串替换。

四、但是 Claude Code 也有明显的坑

用 Claude Code 跑了 3 个模块后，我发现了几个问题：

1. 上下文窗口有限

虽然 Claude Code 支持 200K tokens，但项目太大了，处理到第 4 个模块时，它开始出现”遗忘”——会忘记之前定下的命名规范，把 userContext 写成 UserCtx，或者把某些共用的工具函数重新又生成一遍。

解决办法：把项目拆成小批次，每次只给 Agent 一个模块（20-30 个文件），并且在 prompt 开头明确写出编码规范。

2. 成本不低

跑完 3 个模块大概用了 150 万 tokens（输入 + 输出），按 Sonnet 定价大概 30 块人民币。7 个模块全跑完预估 70-80 块。说实话不算贵，但如果天天跑成本就上来了。

3. 有些坑它看不出来

有一次 Claude Code 把分页组件的逻辑改错了——老代码里 page 从 1 开始计数，它给改成了从 0 开始，导致第一次翻页直接跳到第 2 页。这种”隐式约定”AI 发现不了，必须人工审。

五、换 OpenCode 试试：开源方案的实际表现

因为 Claude Code 依赖 Anthropic 的模型和定价，我开始考虑用 OpenCode 走开源路线。OpenCode 是 Go 写的开源 AI 编程 Agent，支持任意模型后端（OpenAI、Anthropic、本地 Ollama 等）。

配置方式：

# 安装 OpenCode
npm install -g opencode-ai

# 启动
opencode

我试了它连本地 Ollama 跑 Qwen3 模型做简单任务，同时用 GPT-4o 做复杂重构任务的混合方案。

实测结果：

| 维度 | Claude Code | OpenCode + GPT-4o | OpenCode + 本地模型 |

|—|—|—|—|

| 重构速度 | 快（30-45分钟/模块） | 快（类似） | 慢（10-15分钟/文件） |

| 代码质量 | 高 | 高 | 中（经常需要修正） |

| 上下文理解 | 强（200K 窗口） | 强（128K 窗口） | 弱（8K 窗口） |

| 成本 | 约 10 元/模块 | 约 5 元/模块（GPT-4o-mini） | 免费 |

| 可定制性 | 低（闭源） | 高（开源可改） | 高 |

结论：如果你的项目在 10 万行以内，优先 Claude Code，省心。如果是超大型项目，或者有成本约束，OpenCode + GPT-4o-mini 是性价比最高的方案。

六、真正落地的重构工作流

经过 3 周实践，我总结了一套”AI Agent 辅助重构”的标准流程，现在每个模块按这个节奏走：

Step 1: 摸底（15 分钟）
→ 让 Agent 分析模块结构 + 核心逻辑

Step 2: 写测试快照（30 分钟）
→ 先让 Agent 给关键接口写集成测试，确保行为不变

Step 3: 批量迁移（45 分钟）
→ Agent 做 80% 的"搬砖"工作：改调用方式、拆组件、迁移状态管理

Step 4: 人工审阅 + 修复（1 小时）
→ 重点检查：边界条件、隐式约定、性能问题

Step 5: 回归测试（20 分钟）
→ 跑测试 + 人工走查页面

这个流程走下来，一个 2000 行代码的模块从传统”写”模式要 3 天，压缩到了 2-3 小时，效率提升了 8-10 倍。

七、踩过的坑，给你一份避坑清单

1. 不要让 Agent 一次性改超过 30 个文件，它会”走神”。拆成小批次效果更好。

2. 一定要在 prompt 里写编码规范，每批次开头都写一遍。Agent 不会自动”记住”上一轮的约定。

3. 不要相信 Agent 的”完全迁移”声明，它常常漏掉一些隐式功能（比如 URL 参数解析、旧版浏览器的兼容处理）。

4. 分页、日期格式化、权限校验这三个地方最容易出 bug，审查时重点关注。

5. 建议先跑一次 diff 检查，用 diff -rq old/ new/ 对比文件名和结构的变化，确保没有漏文件。

收尾

如果你手里也有一个”尘封已久”的老项目，我的建议很简单：不要一开始就想着重写，也不要零敲碎打地修修补补。先用 AI Agent 摸底，再用它做批量迁移，人工做关键审核。 我这次重构了 7 个核心模块、1800 多个文件，总用时不到 2 周，如果在以前，保守估计要 2-3 个月。

下一步你可以做的：挑一个最小的模块（3-5 个文件），今晚就用 Claude Code 或 OpenCode 跑一遍。先跑通，再推广，成本就是几十块钱的 token 费。这笔账，怎么算都值。