如何在Vite中为多个入口指定不同输出格式

问题描述 #

使用Vite开发Chrome扩展时，需要为不同入口设置差异化输出格式：

• ./src/content.ts 需输出为 iife 格式
• 其他入口（如./src/background.ts、./index.html）需输出为 es 格式

执行构建时出现以下错误：

Invalid value for option "output.inlineDynamicImports" - multiple inputs are not supported when "output.inlineDynamicImports" is true.

希望不用拆分多个Vite配置文件，寻找更简洁的实现方式。当前配置如下：

export default defineConfig({
  ...
  build: {
    outDir: 'build',
    rollupOptions: {
      input: {
        content: './src/content.ts',
        background: './src/background.ts',
        main: './index.html',
      },
      output: [
        {
          name: 'content',
          format: 'iife',
          entryFileNames: "[name].js",
        },
        {
          format: 'es',
          entryFileNames: "[name].js",
          globals: {
            react: 'React',
          },
        },
      ]
    },
   
  },
});

解决方案 #

无需拆分配置文件，只需在Rollup的输出配置中通过include/exclude指定每个输出规则对应的入口，同时显式关闭iife格式的inlineDynamicImports即可解决问题：

修改后的完整配置：

export default defineConfig({
  // ...保留原有其他配置
  build: {
    outDir: 'build',
    rollupOptions: {
      input: {
        content: './src/content.ts',
        background: './src/background.ts',
        main: './index.html',
      },
      output: [
        {
          include: ['content'], // 仅对content入口应用该规则
          format: 'iife',
          entryFileNames: "[name].js",
          name: 'content',
          inlineDynamicImports: false, // 显式关闭，避免多输入场景冲突
        },
        {
          exclude: ['content'], // 排除content，对其余入口应用该规则
          format: 'es',
          entryFileNames: "[name].js",
          globals: {
            react: 'React',
          },
        },
      ]
    },
  },
});

关键说明 #

• include/exclude通过入口名称（对应input对象中的key）匹配目标文件，实现不同入口对应不同输出格式
• 手动设置inlineDynamicImports: false是解决报错的核心：iife格式默认可能尝试内联动态导入，但Rollup不允许在多输入场景下开启该选项，显式关闭即可兼容多入口构建

内容的提问来源于stack exchange，提问作者PaulHuang