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

Mr.俊娜提问于 2026-03-14 17:05:15 阅读 26

前端

我最近在用 Vite 搭项目，发现它默认用 esbuild 做依赖预构建和 TS 转译，但我想改一下 esbuild 的 target 或加个 loader，试了直接在 vite.config.js 里写 esbuild 配置好像不生效。比如我写了这个：

export default defineConfig({
  esbuild: {
    target: 'es2020',
    loader: { '.js': 'jsx' }
  }
})

但启动后还是按默认行为跑，控制台也没报错。是不是 Vite 对 esbuild 的暴露有限制？有没有办法真正自定义到 esbuild 的选项？

我来解答赞 6 收藏

反馈

1 条解答

欧阳柯汝 Lv1

你的配置写法其实是对的，Vite 确实支持直接在根级别写 esbuild 选项。问题可能出在以下几个方面：

1. 配置位置

确保 esbuild 是放在 defineConfig 的根对象里，不是嵌套在其他地方：

import { defineConfig } from 'vite'



export default defineConfig({

  esbuild: {

    target: 'es2020', jsx: 'automatic'  // 或者 'transform'

  }

})

2. loader 的问题

Vite 的 esbuild 配置里的 loader 只作用于你项目源码的转译，不作用于依赖预构建。如果你需要自定义依赖预构建的 loader，得这样写：

export default defineConfig({

  optimizeDeps: {

    esbuildOptions: {

      loader: { '.js': 'jsx' }

    }

  }

})

3. 常见的坑

有时候配置不生效是因为 Vite 内部的默认值覆盖了你的设置。你可以在配置里显式写 jsxFactory 或 jsxFragment 试试。

4. 版本确认

确保你的 Vite 版本是比较新的，Vite 2.x 之后才完整支持 esbuild 配置项。

如果你是想处理 .ts 文件的转译，直接用根级别的 esbuild 就够了；如果是依赖预构建阶段需要特殊处理，才需要用 optimizeDeps.esbuildOptions。你现在具体是想实现什么效果？

2026-03-17 17:05