StencilJS 在 HTML 文件中使用组件

Question

我想在常规的基本 HTML 文件中使用使用 StencilJS 创建的组件。 我遵循了以下步骤：

我创建了一个模板组件来创建基本的 my-component 示例：

npm init stencil

我想在 HTML 文件中使用这个组件，所以我运行了

npm run build

然后我创建了一个具有以下结构的 html 项目：

然后我将文件从 dist 文件夹移动到脚本文件夹中。 我在引用 component.js 文件的 html 文件的头部添加了脚本标签，如下所示：

<script src="script/{component_name}/{component_name}.js"></script>

我在 html 中使用了这样的组件：

<my-component first="Stencil" last="'Don't call me a framework' JS"></my-component>

但是我的组件没有被渲染。 我收到一个涉及 esm.js 文件的错误。 有人可以帮助我完成编译我的模板组件以用于基本 HTML 项目的过程吗？

Answer 1

Stencil 将您的 dist 捆绑到模块中，并根据您在 HTML 中实际使用的组件仅延迟加载所需的代码。 因此，您应该将整个dist文件夹与您的网站一起提供。

推荐的方法是在您的 html 文件中包含以下两个脚本标记：

<script type="module" src="/dist/[namespace]/[namespace].esm.js"></script>
<script nomodule src="/dist/[namespace]/[namespace].js"></script>

（其中[namespace]是您的stencil.config.ts中设置的任何内容）

这将指示支持 ES 模块的浏览器使用 esm 包，而其他浏览器将使用 ES5 (cjs) 包。

如果my-component是您从库中使用的唯一组件，那么您的页面只会延迟加载该代码。 Stencil 了解组件的相互依赖性以及如何相应地延迟加载它们。

---

有一个新的实验性输出目标（称为custom-elements-bundle ），它允许您将所有内容捆绑到一个 js 文件中，这将在某些情况下简化分发。 它仅适用于新的重构编译器（安装 @stencil/core@next后使用 --next标志可用） （Stencil 2 已经推出一段时间了）。