如何构建可直接嵌入HTML的Vite库？解决变量冲突问题

问题原因 #

构建产物的变量直接暴露在全局作用域，和页面其他脚本的变量重名，导致出现Uncaught SyntaxError: Identifier 'y' has already been declared的冲突报错。

解决方案 #

修改Vite配置，让Rollup输出**IIFE（立即执行函数表达式）**格式的产物，通过函数作用域隔离内部变量，避免污染全局环境。

修改后的完整配置如下：

import { fileURLToPath, URL } from 'node:url'

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

export default defineConfig({
  plugins: [
    vue(),
  ],
  define: {
    'process.env': {}
  },
  resolve: {
    alias: {
      '@': fileURLToPath(new URL('./src', import.meta.url))
    }
  },
  build: {
    sourcemap: true,
    lib: {
      entry: resolve(__dirname, './src/main.js'),
      name: 'ModalHelp', // 自定义全局暴露的库名称
      formats: ['iife'] // 指定输出IIFE格式
    },
    outDir: './',
    rollupOptions: {
      output: {
        entryFileNames: 'script.js',
        // 若库依赖外部包（如Vue），需在此指定依赖的全局变量名
        // globals: {
        //   vue: 'Vue'
        // }
      }
    }
  }
})

关键说明 #

• formats: ['iife']：强制Rollup将代码包裹在(function(){...})()中，内部变量仅在函数作用域内生效，不会污染全局。
• lib.name：设置全局作用域中暴露的库对象名称，比如示例中的ModalHelp，后续可通过window.ModalHelp调用库的对外API（如果你的库有暴露接口的话）。
• 若库依赖外部第三方包，需在rollupOptions.output.globals中配置对应包的全局变量名，确保构建时正确引用外部依赖。

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