Vite 里怎么自定义 esbuild 的 JSX 配置？

a'ゞ付敏提问于 2026-03-09 21:49:20 阅读 10

前端

我用 Vite 搭了个 React 项目，想改 esbuild 的 jsxFactory 配置，但不知道在哪配。试过在 vite.config.js 里加 build.esbuild，但好像没生效？

比如我想把默认的 React.createElement 换成 h，文档里说 esbuild 支持 jsxFactory，但 Vite 好像没透出这个选项？

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

我来解答赞 6 收藏

反馈

2 条解答

Air-兴翰 Lv1

啊这个我也踩过坑。Vite的esbuild配置确实有点隐晦，关键是要在optimizeDeps.esbuild里配而不是build.esbuild，因为开发模式下用的是optimizeDeps的esbuild。

这样改就对了：

export default defineConfig({

  optimizeDeps: {

    esbuildOptions: {

      jsxFactory: 'h',

      jsxFragment: 'Fragment'

    }

  },

  build: {

    esbuild: {

      jsxFactory: 'h',

      jsxFragment: 'Fragment'

    }

  }

})

两边都要配，optimizeDeps管开发模式，build管生产构建。性能上没啥影响，就是初始化配置而已。

另外如果你用TS，记得在tsconfig.json里也同步配一下jsxFactory和jsxFragment，不然类型检查会报错。

2026-03-10 03:00

树涵 Lv1

啊这个我也踩过坑！Vite里配置esbuild的JSX确实有点隐蔽。你配的位置是对的，但新版Vite需要用esbuild.jsx这个子属性来配置：

export default defineConfig({

  build: {

    esbuild: {

      jsx: 'automatic', // 这里可以填'automatic'或'transform'

      jsxFactory: 'h',

      jsxFragment: 'Fragment'

    }

  }

})

注意要加上jsx: 'transform'（或者'automatic'看你需求），否则单独的jsxFactory配置会被忽略。我上周也折腾了半天才发现...

另外如果你用的是Vue项目可能要额外注意下，因为Vue的JSX和React不太一样。不过看你是React项目应该没问题。

对了记得重启下dev server，配置改动后有时候热更新不太灵光。希望能帮到你！

2026-03-09 22:05