如何在 IIFE 中包装 Vite 构建并且仍然将所有依赖项捆绑到一个文件中？答案

【问题标题】：How to wrap Vite build in IIFE and still have all the dependencies bundled into a single file?如何在 IIFE 中包装 Vite 构建并且仍然将所有依赖项捆绑到一个文件中？
【发布时间】：2022-11-09 05:35:14
【问题描述】：

我正在使用 Vite 作为我的构建工具构建一个 chrome 扩展。主要问题在缩小和修改期间，创建了很多全局变量。将我的脚本注入页面后，它们与窗口对象上已定义的变量发生冲突。

我想完美的解决方案是将我的整个脚本包装在 IIFE 中。我尝试使用esbuild.format = 'iife'。生成的构建实际上包含在 IIFE 中，但是所有导入都不是内联的。相反，生成的脚本就像 15 行长，带有一堆 require 语句，这显然在浏览器中不起作用。

这是我的配置文件：

export default defineConfig({
  plugins: [
    vue(),
  ],
  esbuild: {
    format: 'iife',
  },
  build: {
    emptyOutDir: false,
    rollupOptions: {
      input: resolve(__dirname, './src/web/index.ts'),
      output: {
        dir: resolve(__dirname, './dist'),
        entryFileNames: 'web.js',
        assetFileNames: 'style.css',
      },
    },
  },
  resolve: {
    alias: {
      '@': resolve(__dirname, './src'),
    },
  },
});

我目前正在使用this hack，可以说将我的构建包装在 IIFE 中（为此我删除了esbuild.format 选项）。

【问题讨论】：

标签： vite esbuild

【解决方案1】：

嘿，我正在做同样的事情！而且我还注意到未缩小的变量和函数可能与网页中的随机代码发生冲突。

根据我对这个主题的研究，您不应该使用 Vite 更改 esbuild 构建选项，因为这会阻止 Rollup 转换输出。相反，您应该在vite.config 的rollupOptions 中使用format: 'iife'。但是，在我的情况下（我相信你的情况），我必须输出多个包，因为扩展代码不能在彼此之间共享模块。当您将格式设置为“iife”时，它会崩溃，原因是：

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

在我的情况下，唯一的解决方案似乎是为我的每个捆绑包使用多个vite.configs（我已经有两个），具有单个input 入口点并格式为“iife”。或者，就像您所做的那样，只需使用一些 hacky 脚本自己编写自调用函数。似乎目前还没有任何完美的解决方案。

【讨论】：