本文旨在解决在webflow等页面中加载多个svelte+vite构建的javascript文件时，因全局变量冲突导致的脚本执行失败问题。我们将探讨两种核心解决方案：利用es模块的type="module"属性实现作用域隔离，以及通过vite的库模式（library mode）将脚本打包为iife或umd格式，从而确保每个svelte应用独立运行，避免变量冲突。
理解Svelte+Vite多模块加载的变量冲突
当您使用Vite构建多个Svelte应用，并将它们作为独立的JavaScript文件（例如index-xxxx.js）引入到同一个HTML页面（如Webflow页面）时，可能会遇到变量冲突问题。典型的表现是，页面上只有第一个加载的脚本能够正常工作，后续的脚本会抛出Uncaught SyntaxError: Identifier 'x' has already been declared之类的错误。
这种冲突的根本原因在于Vite默认将Svelte组件打包成ES模块（ECMAScript Modules）。然而，当这些ES模块通过普通的<script src="...">标签加载时，浏览器不会将它们视为独立的模块，而是将其顶层声明的变量（如x、p等）视为全局变量。因此，当第二个、第三个脚本加载时，如果它们内部有与前一个脚本相同的顶层变量名，就会导致重复声明的错误，因为这些变量已经存在于全局作用域中。
为了解决这个问题，我们需要确保每个Svelte应用的脚本都在其独立的作用域内运行，不污染全局环境。以下是两种有效的解决方案。
解决方案一：利用ES模块加载机制 (<script type="module">)
最直接且推荐的解决方案是利用现代浏览器对ES模块的原生支持。通过在script标签中添加type="module"属性，您可以明确告诉浏览器将该脚本作为ES模块加载。ES模块具有天然的作用域隔离特性，其顶层声明的变量不会自动暴露到全局作用域，从而有效避免了变量冲突。
实现步骤
只需修改HTML中引用Svelte应用脚本的script标签，为其添加type="module"属性即可。
代码示例
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Webflow Svelte Apps</title>
</head>
<body>
<!-- 第一个Svelte应用挂载点和脚本 -->
<div id="address"></div>
<script type="module" src="https://xyz.vercel.app/assets/index-4c8f4240.js"></script>
<!-- 第二个Svelte应用挂载点和脚本 -->
<div id="signup"></div>
<script type="module" src="https://abc.vercel.app/assets/index-d0bf5b05.js"></script>
<!-- 第三个Svelte应用挂载点和脚本 -->
<div id="button"></div>
<script type="module" src="https://def.vercel.app/assets/index-hk98hkh9.js"></script>
</body>
</html>优点
- 简单直接： 仅需修改HTML标签，无需改动Vite配置或Svelte代码。
- 作用域隔离： 浏览器会自动为每个type="module"脚本创建一个独立的作用域，防止全局变量污染。
- 符合标准： 遵循现代JavaScript模块化的最佳实践。
- 自动处理依赖： 如果您的Svelte应用内部有import语句，浏览器会负责加载和解析这些模块依赖。
注意事项
- ES模块的执行是延迟的（defer行为），它们在HTML解析完成后才执行，并且按照在HTML中出现的顺序执行。
- 某些非常老的浏览器可能不支持type="module，但在主流现代浏览器中已广泛支持。
解决方案二：配置Vite的库模式输出 (IIFE/UMD)
另一种解决方案是修改Vite的构建配置，将您的Svelte应用打包成IIFE（Immediately Invoked Function Expression，立即执行函数表达式）或UMD（Universal Module Definition，通用模块定义）格式。这两种格式都会将所有代码包裹在一个函数作用域内，从而有效地避免全局变量冲突。
原理
- IIFE： 将整个脚本包裹在一个自执行匿名函数中，确保内部变量不会泄漏到全局作用域。
- UMD： 是一种更通用的模块格式，它能够兼容CommonJS、AMD以及全局变量模式，使其在各种环境中都能加载。
当Vite以IIFE或UMD格式输出时，即使通过普通的<script>标签加载，脚本内部的变量也会被限制在函数作用域内，不会造成全局污染。
适用场景
- 当您需要将Svelte应用作为独立的、自包含的组件或库嵌入到非模块化环境（如某些CMS或旧版浏览器）时。
- 当您希望将Svelte应用暴露为一个全局变量，供页面上的其他传统脚本调用时（UMD模式）。
实现步骤
修改vite.config.ts文件，使用build.lib选项配置库模式。请注意，build.lib通常用于构建一个独立的库。如果您的三个Svelte应用是完全独立的，您可能需要为每个应用配置一个单独的vite.config.ts文件，或者使用更复杂的Rollup配置来处理多个入口。
以下示例展示了如何为一个Svelte应用配置IIFE格式的库模式输出：
代码示例
// vite.config.ts
import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';
export default defineConfig({
plugins: [svelte()],
build: {
// 为每个Svelte应用配置一个独立的库构建
// 假设这是针对 "address" 应用的配置
lib: {
entry: 'src/address.js', // 您的Svelte应用入口文件 (例如，启动Address组件的JS文件)
name: 'AddressApp', // 当使用UMD或IIFE格式时，这将是全局变量名
fileName: (format) => `address-app.${format}.js`, // 输出文件名格式
formats: ['iife'], // 选择 'iife' (立即执行函数表达式) 或 'umd' (通用模块定义)
},
// 如果您有多个入口文件（例如 src/address.js, src/signup.js, src/button.js），
// 并且希望它们都打包成IIFE，您可以考虑使用 rollupOptions 配置多入口。
// 但对于初学者，为每个应用单独配置或使用 type="module" 通常更简单。
// 例如，如果您有多个入口且希望都输出为IIFE，可以这样配置：
// rollupOptions: {
// input: {
// address: 'src/address.js',
// signup: 'src/signup.js',
// button: 'src/button.js',
// },
// output: {
// format: 'iife', // 确保所有输出都是IIFE
// entryFileNames: '[name]-app.iife.js', // 输出文件名为 address-app.iife.js, signup-app.iife.js 等
// manualChunks: undefined, // 禁用代码分割，确保每个入口生成一个独立文件
// }
// }
},
});构建后，您将得到类似 address-app.iife.js 的文件，然后在HTML中像加载普通脚本一样引用它：
<div id="address"></div> <script src="https://xyz.vercel.app/assets/address-app.iife.js"></script>
优点
- 广泛兼容性： IIFE/UMD格式在各种环境中都能良好工作，包括不支持ES模块的旧环境。
- 独立封装： 代码被完全封装在函数作用域内，彻底避免全局污染。
- 可暴露全局API： 如果选择UMD格式并指定name，可以创建一个全局变量来访问您的Svelte应用导出的功能。
注意事项
- 配置相对复杂，特别是当您有多个独立的Svelte应用需要分别打包时。
- 如果选择UMD格式并指定了name，请确保每个应用的name是唯一的，以避免全局变量名冲突。
- 通常会生成更大的文件，因为包含了额外的包裹代码。
总结与最佳实践
在Webflow这类环境中嵌入多个Svelte+Vite应用时，解决变量冲突是关键。
- 首选方案是使用<script type="module">。 这种方法最简单、最符合现代Web标准，并且能直接解决变量作用域问题。对于大多数现代浏览器和平台（包括Webflow），这都是一个可靠且高效的解决方案。
- Vite的库模式（IIFE/UMD）是备选方案。 如果您需要支持更老的浏览器环境，或者有特定的需求，例如将Svelte应用暴露为全局变量供其他传统脚本调用，那么配置Vite的库模式是一个合适的选择。请记住，对于多个独立应用，可能需要更精细的Vite配置或为每个应用单独配置构建。
无论选择哪种方法，请确保：
- 每个Svelte应用都有一个独立的DOM挂载点（如div id="address"）。
- 在开发和部署过程中，始终检查浏览器的开发者控制台，以便及时发现并解决任何脚本错误。
通过采用上述任一策略，您将能够成功地在同一页面上运行多个独立的Svelte应用，而无需担心变量冲突问题。
