components - 如何将特定的 Svelte 组件导出为具有指定名称的单独类？

Question

如果您现有的 JS 应用程序不使用 ESM、CJS，而只是一堆普通的 JS，您如何导出 Svelte 组件以从应用程序中的随机位置使用？理想情况下，我希望拥有如下所示的原始 JS 文件:

    import AddressComponent from './AddressComponent.svelte';
    import DifferentComponent from './DifferentComponent.svelte';
    // ... my js app code
    const address = new AddressComponent({target: ...});
    // ... more vanilla JS code
    const address = new DifferentComponent({target: ...});
    // ... more vanilla JS code

甚至没有导入，我可以在其他地方将其作为列表进行管理，以便在必要时独立生成 Svelte 组件。

---

使用汇总，似乎唯一的工作方式是指定“iife”。然而，这将我的整个应用程序捆绑为一个 IIFE，并破坏了很多代码重命名的东西，而不是什么。似乎没有办法绕过它。

我使用这种方法得到了很好的编译组件 Exporting Separate Custom Elements from Svelte Components ，但是会生成 esm 或 cjs svelte 组件。可能有一个工具可以轻松地将这种格式转换为 vanilla JS？我没有找到运气

我已经将许多设置组合与 gulp 和 rollup 一起使用，但都没有成功。

Answer 1

svelte 创建的 bundle.js 会自动将 app 根组件导出到浏览器(除非你更改它的名称)，

您可以在 return app; 语句之前在 bundle.js 中写入以下行:

app.Child = Child//或者你的组件叫什么

然后在你的 javascript 中:

var child = new app.Child({ target: document.body });

使用你想要的 Prop 。

您的 HTML 页面最终应如下所示:

<script src="public/build/bundle.js"></script>
<link href="public/build/bundle.css" rel='stylesheet'></link>
<script>
var child = new app.Child({ target: document.body });
</script>