如何在IIFE中包装Vite构建，并且仍然将所有依赖项绑定到一个文件中？
我正在构建一个使用Vite作为我的构建工具的铬扩展。的主要问题是在缩小和损坏过程中创建了大量的全局变量。将我的脚本注入页面后，它们与窗口对象上已经定义的变量发生冲突。
我想最好的解决办法是把我的整个剧本都包装在生活里。我试过使用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'),
},
},
});我目前使用的是这个黑客，也就是说，要用IIFE包装我的构建(为此，我删除了esbuild.format选项)。
回答 2
Stack Overflow用户
发布于 2022-11-08 21:35:14
嘿，我也在做同样的事情！我还注意到，无限化的变量和函数可能与网页中的随机代码发生冲突。
根据我自己在这个主题上的研究，您不应该用Vite更改esbuild构建选项，因为这将阻止汇总转换输出。相反，您应该在您的format: 'iife'的rollupOptions中使用vite.config。但是，在我的例子(我相信你的例子)中，我必须输出多个包，因为扩展代码不能在彼此之间共享模块。当您将格式设置为“生命”时，它将崩溃，原因是：
Invalid value for option "output.inlineDynamicImports" - multiple inputs are not supported when "output.inlineDynamicImports" is true.在我的例子中，唯一的解决方案似乎是对我的每个包使用多个vite.configs (我已经有两个了)，每个包都有一个input入口点和格式作为'iife‘。或者，就像您所做的那样，您只需自己编写自己调用的函数就可以了。似乎到目前为止还没有任何完美的解决方案。
编辑:好的，开始工作了。这是我的vite.config.ts (项目)：
import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'
import tsconfigPaths from 'vite-tsconfig-paths'
import path from 'path'
/** @type {import('vite').UserConfig} */
export default defineConfig({
plugins: [svelte({}), tsconfigPaths()],
build: {
minify: false,
rollupOptions: {
output: {
chunkFileNames: '[name].js',
entryFileNames: '[name].js'
},
input: {
inject: path.resolve('./src/inject.ts'),
proxy: path.resolve('./src/proxy.ts'),
'pop-up': path.resolve('./pop-up.html')
},
plugins: [
{
name: 'wrap-in-iife',
generateBundle(outputOptions, bundle) {
Object.keys(bundle).forEach((fileName) => {
const file = bundle[fileName]
if (fileName.slice(-3) === '.js' && 'code' in file) {
file.code = `(() => {\n${file.code}})()`
}
})
}
}
]
}
}
})Stack Overflow用户
发布于 2022-11-09 23:19:25
好的，我让它使用这个配置：
export default defineConfig({
plugins: [
vue(),
],
build: {
emptyOutDir: false,
rollupOptions: {
input: resolve(__dirname, './src/web/index.ts'),
output: {
format: 'iife',
dir: resolve(__dirname, './dist'),
entryFileNames: 'web.js',
assetFileNames: 'style.css',
},
},
},
resolve: {
alias: {
'@': resolve(__dirname, './src'),
},
},
});它们的关键部分是format: 'iife' is build.rollupOptions.output。
https://stackoverflow.com/questions/73713323
复制相似问题
腾讯云开发者
