React 项目配置

Vite 通过官方 React 插件支持 React 项目开发，包括 Fast Refresh 热更新。

基础 React 配置

JavaScript

import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [react()]
})

React 插件选项

JavaScript

export default defineConfig({
  plugins: [
    react({
      // 使用 Babel 转译
      babel: {
        presets: ['@babel/preset-react'],
        plugins: ['@babel/plugin-transform-runtime']
      },
      // Fast Refresh 配置
      fastRefresh: true
    })
  ]
})

SWC 编译器

Bash

npm add -D @vitejs/plugin-react-swc

JavaScript

import reactSwc from '@vitejs/plugin-react-swc'

export default defineConfig({
  plugins: [reactSwc()]
})

编译器	速度	功能
Babel	较慢	功能全面
SWC	快	基础功能

注意：SWC 编译速度更快，适合大型 React 项目。

Fast Refresh

React Fast Refresh 保持组件状态的同时热更新代码：

jsx

import React, { useState } from 'react'

function App() {
  const [count, setCount] = useState(0)

  return (
    <button onClick={() => setCount(count + 1)}>
      Count: {count}
    </button>
  )
}

export default App

修改组件时 count 状态不会丢失。

React 项目依赖

Bash

npm add react react-dom
npm add -D @vitejs/plugin-react @types/react @types/react-dom

main.tsx 入口

tsx

import React from 'react'
import ReactDOM from 'react-dom/client'
import App from './App'

ReactDOM.createRoot(document.getElementById('root')!).render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
)

要点总结

@vitejs/plugin-react 支持 React
fastRefresh 保持组件状态热更新
SWC 编译器速度更快
需安装 React 和类型声明

📝 发现内容有误？点击此处直接编辑