需系统性重构：先确认React 16.x/webpack 3现状，保留自定义配置；再分阶段迁移为函数组件+TypeScript+Vite+React 18，含组件转换、PropTypes替换、构建工具切换及环境变量适配。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
将一个使用 class 组件、无 TypeScript、依赖老旧版本 React（如 16.x）和 Webpack 3 的项目，升级为函数组件 + TypeScript + Vite + React 18 的现代架构，需要系统性重构而非简单替换文件。
确认当前项目结构与依赖现状
打开终端，进入项目根目录，运行 npm list react 和 npm list webpack 查看实际版本。若输出中出现 react@16.14.0 或 webpack@3.12.0，说明确属老旧项目，不可跳过依赖分析直接升级。
执行 ls -la 检查是否存在 config/webpack.config.js 或 scripts/start.js —— 这类自定义配置文件必须保留并迁移逻辑，删掉会导致开发服务器启动失败。
用文本编辑器打开 package.json，重点标记 "dependencies" 中所有以 react- 开头的包（如 react-router@3），这些都要对应升级到 v6+ 版本，旧版 API 在新环境中会直接报错。
初始化 Cursor 工作区并启用 AI 重构辅助
在 VS Code 中安装 Cursor 插件后，用 File → Open Folder 打开项目根目录，等待右下角状态栏显示 【Cursor ready】 后再进行下一步。
点击左下角齿轮图标 → Settings → Cursor → Enable AI Assistant，勾选 Auto-suggest edits in editor 和 Allow codebase-aware refactoring —— 关闭后者将导致 Cursor 无法识别组件间引用关系，重构时可能漏改 props 类型。
在任意 JSX 文件中右键 → Cursor: Refactor with AI，首次调用会弹出权限确认框，点 Allow；若提示 No project context loaded，需先运行 cursor init 命令生成 .cursor/rules.json。
分阶段迁移 React 组件体系
第一步：将最外层 src/index.js 改为 src/main.tsx，内容替换为：
import React from 'react';import ReactDOM from 'react-dom/client';import './index.css';import App from './App';const root = ReactDOM.createRoot(document.getElementById('root')!);root.render(<react.strictmode><app></app></react.strictmode>);
第二步：用 Cursor 快速转换 class 组件。打开 src/components/Header.js，选中整个 class Header extends Component 块，右键 → Cursor: Convert to functional component。AI 会自动提取 state 为 useState，将 componentDidMount 转为 useEffect，但需人工核对生命周期逻辑是否等价——例如原代码中 setState({ loading: true }) 后立即调用 API，新代码里必须保证 useEffect 的依赖数组为空或正确包含变量，否则触发无限请求。
第三步：批量处理 PropTypes。在项目根目录执行 npm install --save-dev @types/prop-types，然后让 Cursor 全局搜索 PropTypes. 并替换为 TypeScript 接口。注意：Cursor 可能将 PropTypes.arrayOf(PropTypes.object) 错误推导为 any[]，必须手动改为 MyItemType[] 并补全类型定义。
替换构建工具链为 Vite
方法一：脚手架初始化（推荐）
在终端运行：npm create vite@latest my-new-app -- --template react-ts → 进入新目录 → npm install → 将原项目 src/ 下已重构的文件逐个复制进新 src/，覆盖时保留 vite.config.ts 和 tsconfig.json。
方法二：原地迁移（适合 CI 流程强耦合的老项目）
执行 npm install -D vite @vitejs/plugin-react，创建 vite.config.ts，写入：import { defineConfig } from 'vite'import react from '@vitejs/plugin-react'export default defineConfig({ plugins: [react()], resolve: { alias: { '@': '/src' } } })
然后修改 package.json 中的 "scripts"："dev": "vite"，"build": "tsc && vite build"，"preview": "vite preview"。【删除 webpack.config.js 和 node_modules 后必须重装依赖，否则 Vite 无法识别已安装的插件】
方法三：环境变量兼容
Vite 默认读取 .env 而非 process.env.NODE_ENV，将原 Webpack 中 DefinePlugin 注入的变量（如 API_BASE_URL）全部改为 VITE_API_BASE_URL 格式，并在 .env 中声明。Cursor 的「Find all references」功能可快速定位所有硬编码 URL，避免遗漏。
