JSX/TSX 转译配置

Vite 支持自定义 JSX 转译配置，适配不同框架的组件创建方式。

esbuild JSX 配置

JavaScript

export default defineConfig({
  esbuild: {
    jsxFactory: 'h',
    jsxFragment: 'Fragment'
  }
})

框架 JSX 工厂函数

框架	jsxFactory	jsxFragment
Vue	h	Fragment
React	React.createElement	React.Fragment
Preact	h	Fragment

React 自动导入

JavaScript

export default defineConfig({
  esbuild: {
    jsx: 'automatic',
    jsxImportSource: 'react'
  }
})

自动导入效果：

jsx

// 源码
const el = <div>Hello</div>

// 转译后自动导入
import { jsx as _jsx } from 'react/jsx-runtime'
const el = _jsx('div', { children: 'Hello' })

Babel JSX 配置

JavaScript

import react from '@vitejs/plugin-react'

export default defineConfig({
  plugins: [
    react({
      babel: {
        plugins: [
          ['@babel/plugin-transform-react-jsx', {
            pragma: 'h',
            pragmaFrag: 'Fragment'
          }]
        ]
      }
    })
  ]
})

注意：使用 Babel 时需安装 @vitejs/plugin-react 插件。

Vue JSX 配置

JavaScript

import vueJsx from '@vitejs/plugin-vue-jsx'

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

JSX 文件扩展名

JavaScript

export default defineConfig({
  resolve: {
    extensions: ['.js', '.jsx', '.ts', '.tsx']
  }
})

TypeScript JSX 配置

JSON

// tsconfig.json
{
  "compilerOptions": {
    // Vue
    "jsx": "preserve",

    // React
    "jsx": "react-jsx"
  }
}

要点总结

jsxFactory 定义组件创建函数
jsx: 'automatic' 启用自动导入
Vue 使用 vueJsx 插件
React 可用 esbuild 或 Babel 转译