esbuild 转译配置

Vite 使用 esbuild 转译 TypeScript，可通过配置自定义转译行为。

esbuild 配置位置

JavaScript

export default defineConfig({
  esbuild: {
    // esbuild 配置选项
  }
})

装饰器支持

JavaScript

export default defineConfig({
  esbuild: {
    tsconfigRaw: {
      compilerOptions: {
        experimentalDecorators: true,
        useDefineForClassFields: false
      }
    }
  }
})

JSX 工厂函数

JavaScript

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

目标环境

JavaScript

export default defineConfig({
  esbuild: {
    target: 'es2020'
  }
})

配置选项

选项	说明
jsxFactory	JSX 元素创建函数
jsxFragment	JSX 片段函数
target	编译目标环境
tsconfigRaw	TypeScript 配置覆盖
keepNames	保持函数/类名

注意：esbuild 不支持 emitDecoratorMetadata。

装饰器与类字段

JavaScript

export default defineConfig({
  esbuild: {
    tsconfigRaw: {
      compilerOptions: {
        // 装饰器设置
        experimentalDecorators: true,
        // 类字段语义
        useDefineForClassFields: false
      }
    }
  }
})

JSX 自动导入

JavaScript

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

与 tsconfig.json 关系

esbuild 配置可覆盖 tsconfig.json 中的部分选项：

可覆盖	不可覆盖
experimentalDecorators	emitDecoratorMetadata
useDefineForClassFields	类型检查相关
target	模块解析相关

要点总结

esbuild 负责 TypeScript 转译
tsconfigRaw 覆盖 TypeScript 配置
支持装饰器和 JSX 工厂函数配置
不支持 emitDecoratorMetadata

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