Svelte+Vite+Webflow多脚本变量冲突问题求助

问题场景 #

用Vite构建三个基于Svelte的JS文件，部署到不同Vercel地址后，在同一个Webflow页面依次引入：

<div id="address"></div>
<script src="https://xyz.vercel.app/assets/index-4c8f4240.js"></script>
<div id="signup"></div>
<script src="https://abc.vercel.app/assets/index-d0bf5b05.js"></script>
<div id="button"></div>
<script src="https://def.vercel.app/assets/index-hk98hkh9.js"></script>

每个脚本会查找对应ID的div并注入HTML，但无论哪个脚本放在首位，只有第一个能正常工作，后续脚本无法注入内容，控制台报错变量重复声明：

software-business-case-guide:571  Uncaught SyntaxError: Identifier 'x' has already been declared (at software-business-case-guide:571:9)
index-4c8f4240.js:1  Uncaught SyntaxError: Identifier 'p' has already been declared (at index-4c8f4240.js:1:1)

推测是全局变量冲突导致，不想合并所有脚本（否则需为页面组合单独构建），需要实现各脚本变量隔离的方案，当前vite.config.ts配置如下：

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [svelte()],
})

可行解决方案 #

1. 配置Vite构建为IIFE格式隔离作用域 #

Vite默认构建输出可能会暴露全局变量，修改每个项目的vite.config.ts，将构建格式设为iife（立即执行函数表达式），自动隔离每个脚本的变量作用域：

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [svelte()],
  build: {
    lib: {
      entry: 'src/main.js', // 替换为你的项目入口文件路径
      name: 'AddressComponent', // 每个项目设置唯一名称，避免全局挂载冲突
      formats: ['iife'],
      fileName: (format) => `index.${format}.js`
    }
  }
})

每个项目的name必须唯一，防止全局变量名重复。重新构建后部署，即可解决冲突。

2. 手动用IIFE包裹脚本（无需重新构建） #

如果暂时无法重新构建，可以在Webflow引入脚本时，手动将每个脚本的加载逻辑包裹在IIFE中，隔离执行上下文：

<div id="address"></div>
<script>
(function() {
  const script = document.createElement('script');
  script.src = 'https://xyz.vercel.app/assets/index-4c8f4240.js';
  document.body.appendChild(script);
})();
</script>
<div id="signup"></div>
<script>
(function() {
  const script = document.createElement('script');
  script.src = 'https://abc.vercel.app/assets/index-d0bf5b05.js';
  document.body.appendChild(script);
})();
</script>
<div id="button"></div>
<script>
(function() {
  const script = document.createElement('script');
  script.src = 'https://def.vercel.app/assets/index-hk98hkh9.js';
  document.body.appendChild(script);
})();
</script>

3. 使用ES模块格式加载 #

ES模块本身具有独立作用域，不会污染全局变量。修改Vite构建配置为ES模块格式：

import { defineConfig } from 'vite'
import { svelte } from '@sveltejs/vite-plugin-svelte'

export default defineConfig({
  plugins: [svelte()],
  build: {
    lib: {
      entry: 'src/main.js',
      formats: ['es'],
      fileName: (format) => `index.${format}.js`
    }
  }
})

重新构建部署后，在Webflow中以模块方式引入：

<div id="address"></div>
<script type="module">
  import 'https://xyz.vercel.app/assets/index.es.js';
</script>
<div id="signup"></div>
<script type="module">
  import 'https://abc.vercel.app/assets/index.es.js';
</script>
<div id="button"></div>
<script type="module">
  import 'https://def.vercel.app/assets/index.es.js';
</script>

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