如何将Svelte组件编译为可通过CDN引入的单文件供纯HTML项目使用

一、项目配置调整 #

你当前用npm create svelte@latest创建的是常规Svelte应用，默认打包逻辑针对完整网站，需要改成UMD格式的组件打包模式，步骤如下：

1. 安装必要依赖：
   默认Vite配置是打包SPA，需补充插件支持组件打包，执行命令：

   npm install -D @vitejs/plugin-svelte
   

2. 修改vite.config.ts（JS项目对应vite.config.js）：
   替换原有配置，指定输出UMD格式（兼容浏览器直接引入）及全局变量名：

   import { defineConfig } from 'vite';
   import { svelte } from '@sveltejs/vite-plugin-svelte';
   
   export default defineConfig({
     plugins: [svelte({ compilerOptions: { customElement: false } })],
     build: {
       lib: {
         entry: 'src/lib/MyComponent.svelte', // 指向你的组件文件路径
         name: 'MySvelteComponent', // 浏览器全局变量名，供用户直接调用
         formats: ['umd'], // 仅输出UMD格式，适配CDN场景
         fileName: (format) => `my-component.${format}.js`
       },
       rollupOptions: {
         // 可选：排除Svelte核心库（让用户自行引入Svelte CDN），若要把Svelte打包进文件则删除此项
         external: ['svelte'],
         output: {
           globals: {
             svelte: 'Svelte'
           }
         }
       }
     }
   });
   

3. 整理组件路径：
   在src目录下新建lib文件夹，将你的测试组件（命名为MyComponent.svelte）放入其中，就是你写的那段带text变量的组件代码。

二、打包并获取目标文件 #

1. 执行打包命令：

   npm run build
   

2. 定位打包产物：
   打包完成后，dist目录下会生成my-component.umd.js文件，这就是你需要上传到CDN的文件。
   • 若你选择打包Svelte核心库，该文件可独立使用，用户无需额外引入Svelte；
   • 若未打包Svelte，用户需先引入Svelte的CDN文件，再加载你的组件。

三、用户端使用示例 #

场景1：组件已包含Svelte核心库 #

<script src="http://examplecdn.com/my-component.umd.js"></script>
<script>
  // 将组件挂载到页面指定元素
  new MySvelteComponent({
    target: document.getElementById('component-container'),
    props: {
      // 若组件有可配置props，在此传递
    }
  });
</script>
<div id="component-container"></div>

场景2：组件未包含Svelte核心库 #

<script src="https://cdn.jsdelivr.net/npm/svelte@4/dist/svelte.umd.js"></script>
<script src="http://examplecdn.com/my-component.umd.js"></script>
<script>
  // 挂载代码同上
  new MySvelteComponent({
    target: document.getElementById('component-container')
  });
</script>
<div id="component-container"></div>

四、关键说明 #

• 这种打包方式无需你手动改写Svelte代码，只是将组件编译为浏览器可直接执行的JS，保留原有组件逻辑；
• 上线前建议本地测试：把dist文件放到本地静态服务器，用纯HTML页面引入验证功能正常后，再上传到CDN。

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