ai 实践-项目迁移

背景

需要将页面从一个旧项目迁移到新项目，由于我对这两个项目都完全陌生，对功能也不熟悉，所以我的原则是：小心翼翼，确保安全稳定

这两个项目基于不同的技术栈：

• 旧项目： React 15、Webpack、jQuery、内部 UI 框架
• 新项目： React 16.8+、TypeScript、Redux、Vite、Axios、Ant Design

实现

• 技术栈差异
  • 显而易见的 JS 与 TS 的区别
  • 类组件（带有生命周期方法）与函数组件（使用 Hooks）等的转换
  • 应重构或移除直接的 DOM 操作或 jQuery 的使用
• UI 与样式差异
  • 两个项目都使用 SCSS
  • 旧项目使用通过 CDN 引入的 Bootstrap，而新项目使用现代框架 Ant Design
• API 调用
  • 从 jQuery 迁移到 带有 API 服务封装的 Axios
• 构建差异
  • 主要集中在代理（proxy）配置上
• 项目结构
  • 必须遵循新项目的目录结构

我不能粘贴代码，但我可以分享一些经验供未来参考

• 由于我对代码不熟悉，任何改动都意味着需要投入额外的验证时间，所以安全起见，就挨个页面迁移以及挨个验证。
• 一旦完成一个页面的迁移，就可以引导 AI 模型学习这次迁移过程，并将所获经验应用到下一个页面的迁移中
• 技术栈差异部分对 AI 来说相对简单。在分析了两个项目的代码库后，模块可以识别技术栈差距，生成转换计划并快速执行。
• 依赖环境信息（如 location）的功能（如 URL 跳转或相对文件路径）必须反复检查——这些可能需要手动进行微调！
• 在迁移过程中，大模型可能会出于优化目的在未通知用户的情况下删除或修改代码。这个需要注意，因为对于迁移本身，我希望它是安全稳定的，基本上就是将代码从一处搬到另一处，不要改变任何业务逻辑和功能。