如何为React 17而非React 18安装Vite与TypeScript？

当然可以搭建适配React 17的Vite + TypeScript环境，以下是具体步骤：

• 初始化Vite TypeScript项目
  先通过Vite官方初始化命令创建基础的React+TS项目：

  npm create vite@latest your-project-name -- --template react-ts
  # 或使用yarn
  yarn create vite your-project-name --template react-ts
  # 或使用pnpm
  pnpm create vite your-project-name --template react-ts
  

• 调整依赖版本
  进入项目目录，修改package.json中的依赖，指定React 17及适配的插件、类型定义版本：

  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "@types/react": "^17.0.47",
    "@types/react-dom": "^17.0.17",
    "@vitejs/plugin-react": "^2.2.0",
    "typescript": "^4.9.5",
    "vite": "^3.2.7"
  }
  

  注：@vitejs/plugin-react@2.x系列完全兼容React 17，而3.x+版本针对React 18优化，不建议使用。

• 重新安装依赖
  删除现有依赖锁文件（package-lock.json/yarn.lock/pnpm-lock.yaml）和node_modules目录，执行安装命令：

  npm install
  # 或 yarn install / pnpm install
  

• 修正入口文件逻辑
  React 18使用createRoot渲染组件，而React 17仍使用render，修改src/main.tsx：

  import React from 'react'
  import ReactDOM from 'react-dom'
  import App from './App'
  import './index.css'
  
  ReactDOM.render(
    <React.StrictMode>
      <App />
    </React.StrictMode>,
    document.getElementById('root')
  )
  

• 验证环境
  启动开发服务器：

  npm run dev
  

  确认项目正常启动且无版本兼容报错即可。

内容的提问来源于stack exchange，提问作者umutfirat