如何将Vite构建产物包裹在IIFE中并打包所有依赖至单文件？

问题描述 #

用Vite开发Chrome扩展，压缩混淆后生成大量全局变量，注入页面后和window对象上已有的变量产生冲突。尝试通过设置esbuild.format = 'iife'将脚本包裹在IIFE中，但生成的产物仅15行左右，全是require语句，无法在浏览器环境运行。

解决方案 #

问题核心是配置位置错误——不要在esbuild选项中设置格式，应该在Rollup的output配置里指定format: 'iife'。

Vite底层依赖Rollup完成最终打包，esbuild.format仅影响Vite内部的依赖预构建等环节，无法控制最终产物的格式。直接配置Rollup的输出格式为IIFE，Rollup会自动将所有依赖内联，打包成完整的自执行函数脚本，不会生成浏览器不支持的require语句。

修改后的完整配置：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'

export default defineConfig({
  plugins: [
    vue(),
  ],
  // 移除esbuild.format配置
  build: {
    emptyOutDir: false,
    rollupOptions: {
      input: resolve(__dirname, './src/web/index.ts'),
      output: {
        dir: resolve(__dirname, './dist'),
        entryFileNames: 'web.js',
        assetFileNames: 'style.css',
        // 新增：指定输出格式为IIFE
        format: 'iife',
        // 可选：如果需要向window暴露特定变量（比如扩展入口对象），可添加以下配置
        // name: 'MyChromeExtension',
        // globals: {
        //   vue: 'Vue' // 若依赖Vue且需全局访问时设置
        // }
      },
    },
  },
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'),
    },
  },
});

原理说明 #

当Rollup设置format: 'iife'时，会将所有模块打包成一个自执行函数，所有变量都被限制在函数作用域内，不会污染全局window对象，从根源解决变量冲突问题。同时Rollup会自动处理依赖内联，确保产物是完整可运行的浏览器端脚本。

之前设置esbuild.format = 'iife'会干扰Vite的构建流程，导致Rollup未正确处理依赖打包，因此生成了带require的残缺脚本。

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