在 Astro 中使用第三方 Web 组件

Question

我真的很想在 astro 中使用这个开关组件：

此文件（如果单击它）有几个导入“块”。

我真的希望 astro / vite 将其捆绑到客户端 JavaScript 中，我不想在外部依赖它。我希望将其捆绑到网站中。

我尝试了很多方法来让它工作，包括将其包装在像这样的 astro 文件中：

---
import 'https://cdn.jsdelivr.net/npm/@shoelace-style/[email protected]/cdn/components/switch/switch.js'
---
<sl-switch></sl-switch>

Astro 网站上有一篇关于如何创建自定义 Web 组件的教程，但没有关于如何使用外部组件的教程。

我只是想让 vite 捆绑这个 esm 模块并将其包含在网站中（在它使用的页面上）...

Answer 1

如果你想让Vite解析CDN内联，你必须为其编写一个插件。但是，如果你只有这样的需求，添加插件就有点大材小用了：

你有 npm:

---
import '@shoelace-style/shoelace/cdn/components/switch/switch.js'
---
<sl-switch></sl-switch>