如何在不添加Svelte依赖的情况下将Svelte组件导入原生JS项目？

方案1：编译为独立JS模块（IIFE/UMD格式） #

这种方式会把Svelte运行时和组件代码打包到单个文件里，输出的文件可以直接被任何项目导入或引用。

步骤1：配置打包工具（以Vite为例） #

在项目根目录创建vite.config.js，设置将组件编译为自包含的模块：

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

export default defineConfig({
  plugins: [svelte()],
  build: {
    lib: {
      entry: 'src/YourTargetComponent.svelte', // 你的组件入口文件
      name: 'YourComponent', // 全局变量名称（IIFE/UMD格式用）
      formats: ['iife', 'umd'],
      fileName: (format) => `your-component.${format}.js`
    },
    rollupOptions: {
      external: [], // 不把Svelte标记为外部依赖，直接打包进文件
      output: {
        globals: {} // 无需全局变量映射
      }
    }
  }
});

步骤2：编译并交付文件 #

执行vite build后，会在dist目录生成两个文件：

• your-component.iife.js：可直接通过<script>标签引入的自执行脚本
• your-component.umd.js：支持模块化导入的通用模块

需求方的使用方式：

• 纯HTML项目直接引用：

<script src="your-component.iife.js"></script>
<div id="component-container"></div>
<script>
  // 创建组件实例并挂载
  const componentInstance = new YourComponent({
    target: document.getElementById('component-container'),
    props: {
      // 传入组件需要的属性
      title: 'Hello World'
    }
  });
</script>

• 模块化项目（如React/Vue/纯JS模块项目）导入：

import YourComponent from './your-component.umd.js';

const instance = new YourComponent({
  target: document.getElementById('container'),
  props: { /* 组件属性 */ }
});

方案2：编译为Web Components（自定义元素） #

利用Svelte的自定义元素特性，把组件编译为符合浏览器标准的Web Components，任何项目都能像使用原生HTML标签一样调用，兼容性更强。

步骤1：配置组件为自定义元素 #

在你的Svelte组件文件顶部启用自定义元素模式：

<script>
  export let title = 'Default Title';
  // 声明该组件为自定义元素
  export let customElement = true;
</script>

<div class="custom-component">
  <h2>{title}</h2>
</div>

<style>
  /* 组件样式会被封装在Shadow DOM内，不污染全局样式 */
  .custom-component { padding: 16px; border: 1px solid #eee; }
</style>

步骤2：编译组件 #

调整Vite配置，编译为原生自定义元素：

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

export default defineConfig({
  plugins: [svelte({
    compilerOptions: {
      customElement: true // 全局启用自定义元素编译
    }
  })],
  build: {
    lib: {
      entry: 'src/YourComponent.svelte',
      formats: ['es'],
      fileName: () => 'your-component.js'
    },
    rollupOptions: {
      external: [] // 打包Svelte运行时
    }
  }
});

步骤3：需求方使用方式 #

• 模块化导入：

import './your-component.js';

然后在HTML中直接使用自定义标签：

<your-component title="Hello Web Component"></your-component>

• 直接通过<script>引入：

<script src="your-component.js"></script>
<your-component title="Hello"></your-component>

注意事项 #

• 编译后的文件会包含Svelte运行时，体积会比未打包的组件大，但确保了自包含性。
• 如果需要交付多个组件，可以打包成单个文件，或者每个组件单独编译（按需引入更灵活）。
• 测试时需在非Svelte项目中验证功能，确保样式、交互正常运行。

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