如何将Svelte 3组件编译为可在Vanilla JS中使用的IIFE

解决方案 #

基于Vite普通Svelte项目的配置步骤 #

1. 修改Vite配置文件
   在项目根目录的vite.config.js中，配置build选项指定输出IIFE格式并暴露全局变量：

   import { defineConfig } from 'vite'
   import { svelte } from '@sveltejs/vite-plugin-svelte'
   
   export default defineConfig({
     plugins: [svelte()],
     build: {
       lib: {
         entry: 'src/YourComponent.svelte', // 替换为你的组件实际入口路径
         name: 'YourComponent', // 全局暴露的组件变量名，后续实例化用
         formats: ['iife'], // 指定输出IIFE格式
         fileName: (format) => `your-component.${format}.js`
       },
       rollupOptions: {
         external: [], // 不需要打包进IIFE的依赖（无依赖则留空）
         output: {
           globals: {} // 外部依赖对应的全局变量（无依赖则留空）
         }
       }
     }
   })
   

2. 确保组件正确导出props
   在你的Svelte组件文件中，导出需要外部传递的属性，示例：

   <script>
     // 导出供外部传入的props
     export let placeholder = '请选择';
     // 你的组件逻辑，比如API请求、状态管理等
     let options = [];
     async function loadOptions() {
       const res = await fetch('your-api-url');
       options = await res.json();
     }
     loadOptions();
   </script>
   
   <!-- 组件UI结构 -->
   <div class="custom-select">
     <div class="select-trigger">{placeholder}</div>
     <ul class="options-list">
       {#each options as option}
         <li>{option.label}</li>
       {/each}
     </ul>
   </div>
   
   <style>
     /* 组件样式会被自动打包进IIFE */
     .custom-select {
       position: relative;
       width: 200px;
     }
     .select-trigger {
       padding: 8px;
       border: 1px solid #ddd;
       cursor: pointer;
     }
     .options-list {
       margin: 0;
       padding: 0;
       list-style: none;
       border: 1px solid #ddd;
       border-top: none;
     }
   </style>
   

3. 编译组件
   执行构建命令生成IIFE文件：

   npm run build
   

   构建完成后，dist目录下会生成your-component.iife.js文件。

4. 在浏览器中直接使用
   在普通HTML文件中引入脚本，然后实例化组件：

   <!DOCTYPE html>
   <html>
   <head>
     <script src="./dist/your-component.iife.js"></script>
   </head>
   <body>
     <div id="select-container"></div>
     <script>
       // 实例化组件并挂载到指定DOM元素
       const customSelect = new YourComponent({
         target: document.getElementById('select-container'),
         props: {
           placeholder: '请选择您的选项'
         }
       });
     </script>
   </body>
   </html>
   

基于SvelteKit库项目的配置调整 #

如果你用的是SvelteKit库项目，只需修改vite.config.js的build配置，其余步骤和上述一致：

import { sveltekit } from '@sveltejs/kit/vite';
import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [sveltekit()],
  build: {
    outDir: 'dist',
    lib: {
      entry: 'src/lib/YourComponent.svelte', // SvelteKit库组件默认在src/lib目录下
      name: 'YourComponent',
      formats: ['iife'],
      fileName: (format) => `your-component.${format}.js`
    },
    rollupOptions: {
      external: [],
      output: {
        globals: {}
      }
    }
  }
});

关键注意事项 #

• 如果组件依赖第三方库（如axios），可以选择：
  • 将依赖打包进IIFE：从external数组中移除依赖名；
  • 让用户单独引入依赖：将依赖名加入external，并在globals中指定对应的全局变量（比如{ axios: 'axios' }）。
• Svelte组件的样式会被自动内联到IIFE脚本中，无需额外引入CSS文件。
• 组件的响应式逻辑、生命周期钩子会正常工作，和在Svelte项目中使用一致。

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