React 18如何强制开发与生产环境均使用JSX而非JSXDev？

1. 能否强制开发/生产环境均使用JSX？ #

可以，通过调整Vite和TypeScript的配置就能实现。

2. 生产环境仍加载JSXDev的常见原因 #

Vite的React插件本应根据环境自动切换运行时：开发模式用JSXDevRuntime，生产模式切到JSXRuntime，出现异常通常是这几个情况：

• 项目里的第三方依赖没正确打包，内部硬编码引入了JSXDev
• Vite配置里误开了devtools或其他强制保留开发特性的选项
• tsconfig.json里显式把jsxDev设为了true
• 构建命令写错了，比如用了vite build --mode development强制走开发模式配置

3. 强制全局使用JSX的配置步骤 #

步骤1：修正Vite React插件配置 #

在vite.config.ts里给React插件添加强制配置，锁定生产模式的运行时：

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

export default defineConfig({
  plugins: [
    react({
      jsxRuntime: 'automatic',
      jsxImportSource: 'react',
      babel: {
        presets: [
          ['@babel/preset-react', {
            runtime: 'automatic',
            development: false // 强制关闭JSXDev注入
          }]
        ]
      }
    })
  ],
  build: {
    mode: 'production' // 确保构建默认走生产模式
  }
})

步骤2：修正TS配置 #

确保tsconfig.json里没有强制开启jsxDev，保持jsx配置正确：

{
  "compilerOptions": {
    "jsx": "react-jsx",
    "jsxDev": false // 显式关闭JSXDev模式
  }
}

步骤3：排查第三方依赖 #

检查package.json里的依赖，如果有依赖在生产包中包含JSXDev引用：

• 把依赖更到最新稳定版
• 用patch-package修改依赖代码，替换JSXDev为JSX
• 若依赖仅用于开发，移到devDependencies中

步骤4：验证构建命令 #

确保用标准生产构建命令：

vite build

别加--mode development参数，否则会强制走开发环境配置。

4. 验证是否生效 #

构建完成后，打开dist/assets下的打包产物，搜索JSXDev，如果没有匹配结果，说明已经成功切换为JSX运行时。

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