Vite打包库模式下怎么同时输出ESM和UMD格式？

Prog.玉研提问于 2026-03-24 08:01:25 阅读 25

工具

我用 Vite 的 library 模式打包一个组件库，想同时生成 ESM 和 UMD 两种格式，但配置 build.lib 后只能输出一种。试过在 rollupOptions 里加 output 数组，结果报错说不能和 lib 模式一起用。

现在我的 vite.config.js 是这样的：

export default defineConfig({
  build: {
    lib: {
      entry: 'src/index.js',
      name: 'MyLib',
      fileName: 'my-lib'
    }
  }
})

怎么才能让它同时打出 my-lib.es.js 和 my-lib.umd.js 呢？

我来解答赞 11 收藏

反馈

1 条解答

司马西西 Lv1

Vite 的 lib 模式默认只支持一种输出格式，不过你可以通过配置 rollupOptions 来绕过这个限制。把你的 vite.config.js 改成这样：

export default defineConfig({

  build: {

    rollupOptions: {

      input: 'src/index.js',

      output: [

        {

          format: 'es',

          file: 'dist/my-lib.es.js',

          preserveModules: false,

        },

        {

          format: 'umd',

          file: 'dist/my-lib.umd.js',

          name: 'MyLib',

          globals: {

            // 如果你有外部依赖，需要在这里声明

            // vue: 'Vue',

          },

        },

      ],

    },

  },

})

复制过去试试，应该就能同时生成 ESM 和 UMD 格式的文件了。注意 globals 那块，如果你的库依赖其他全局变量，记得在这里配置一下。

2026-03-24 08:02