在 Astro 中导入 StencilJs 生成的 Web 组件

Question

我已经使用 StencilJs 构建了一个 Web 组件并将其发布到 NPM，并希望在 Astro 项目中使用它。

但是网络组件未加载。

package.json：

"obfuscate-link-web-component": "^0.0.2",

在 astro 页面中，我使用脚本标签来导入 Web 组件

<Layout title="Impressum" description="Impressum">
      E-Mail: <obfuscate-link email="aGV..."></obfuscate-link><br />
</Layout>
<script>
import('obfuscate-link-web-component');
</script>

我可以看到类型模块的index.js是从Web组件的package.json加载的，但它没有执行。

我想这与 Stencil 的延迟加载有关。
我如何加载网络组件？

请注意，我不能使用 node_modules 中特定文件的完全限定路径，因为当 Astro 构建站点时这将不起作用。

---

更新 我按照建议将组件 outputTargets 更改为

dist-custom-elements

和

www

并将 package.json 入口点更改为

"main": "dist/components/index.js"

现在我可以这样使用它：

<script>
import { ObfuscateLink } from 'obfuscate-link-web-component';
customElements.define('obfuscate-link', ObfuscateLink);
</script>

或者

<script src="https://unpkg.com/[email protected]/dist/components/obfuscate-link.js"></script>

Answer 1

我不了解 Astro，但 Stencil 组件/库不是单个文件“index.js”，它是一种“加载器”文件，例如动态加载其他文件的“/dist/obfuscate-link-web-component/obfuscate-link-web-component.esm.js”。

您可能需要研究自定义元素构建选项（https://stenciljs.com/docs/custom-elements），这在不需要动态加载时很有用。

也可以更改模块或主 package.json 属性以指向 esm.js 加载器而不是索引 - 我不知道这是否有效。