在 vite 中配置 react，核心步骤是安装 `@vitejs/plugin-react` 插件并在 vite.config.js 中引入它。这样 vite 就能自动处理 jsx 语法转换和 hmr（热模块替换），无需手动配置 babel。只需运行 npm create vite@latest my-app -- --template react 即可生成包含完整配置的初始项目。
Vite 项目中如何启用 JSX 支持
要启用 JSX 支持，必须在构建配置文件中注册 React 插件。Vite 默认不支持 JSX，因此需要显式添加 @vitejs/plugin-react。该插件基于 SWC 实现，比传统的 Babel 更快。配置后，所有 .jsx 或 .tsx 文件都会被正确编译。
// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [react()],
})上述代码展示了最简配置。导入插件后，将其放入 plugins 数组。Vite 会自动识别并应用。确保已执行 npm install @vitejs/plugin-react。否则启动时会报错找不到模块。
立即学习“Java免费学习笔记（深入）”；
构建 Shopify 嵌入式应用（Embedded App）的开发技能：基于 @shopify/shopify-app-react-router + React Router v7 + Admin API 2026-04。覆盖 shopifyApp 配置、authenticate.admin 的 GraphQL/REST 调用、Webhook 校验、Session 存储、订阅计费、App Bridge 导航、部署，并新增：适用场景判断、安全最佳实践、错误处理与容错、最佳实践、常见问题 FAQ、高级场景。G
React 插件有哪些可选配置项
@vitejs/plugin-react 提供多个选项以控制编译行为。常用的是 babel 选项，允许传入自定义的 Babel 配置对象。这适用于需要特定 Babel 插件的场景。另一个选项是 fastRefresh，默认开启，用于保持组件状态的热更新。如果关闭它，每次修改都会重置组件状态。
// vite.config.js
import { defineConfig } from 'vite'
import react from '@vitejs/plugin-react'
export default defineConfig({
plugins: [
react({
babel: {
plugins: ['babel-plugin-macros']
}
})
],
})这段代码演示了如何注入额外的 Babel 插件。通过 babel.plugins 数组添加。这在处理 @babel/plugin-proposal-decorators 时很有用。注意装饰器语法可能需要额外配置 TypeScript 编译器。但 Vite 主要依赖 SWC，Babel 仅作为补充。
当使用 TypeScript 时 React 插件如何处理类型检查
React 插件本身不执行 TypeScript 类型检查。它只负责将 TSX 转换为 JS。类型检查由 tsc 或 IDE 完成。在 Vite 中，通常配合 typescript 包使用。插件会保留类型注解直到打包阶段被移除。开发时，IDE 如 VS Code 会实时反馈错误。生产构建时，SWC 会剥离类型信息。
