如何将Svelte应用编译为可在外部站点使用的Web组件/原生JS

背景 #

大约一年前我开发了一款Vue Web组件，可嵌入任意网站支持英国开放银行支付，还基于它开发了WordPress、Magento和Shopify插件。目前我已用Svelte重写该组件，采用Flowbite Svelte进行样式设计，需要将其导出为单个JS文件的Web组件，要求包含所有功能代码（包括Flowbite及CSS样式），且整体包裹在ShadowDOM中，实现与原Vue版本一致的使用方式。

遇到的核心问题与执行报错 #

• 查阅大量指南后，关于配置项compilerOptions: { customElement: true }应放置在svelte.config.js、vite.config.js还是rollup.config.js中，各资料说法不一，无法确定正确配置位置。
• 尝试了推荐的解决方案后，出现以下具体问题：
  • 执行npm run build后，未生成预期的dist/index.js文件
  • dist/assets文件夹中生成了4个文件：index-DwmGsLQW.js、apexcharts.common.js和index-uK8bMt0h
  • 将入口文件改为index-DwmGsLQW.js并执行vite -c vite.js.config.js build后，dist-js文件夹生成了components.js、components.umd.js和apexcharts.common.js
  • 在纯HTML页面中引入components.js时，控制台报错：Unexpected token 'export' (at app_2.js:113050:1)

项目结构 #

• 常规项目结构：
  
• SvelteKit版本项目结构：
  

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