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 Modules 的浏览器使用 esm 包，而其他浏览器将使用 ES5 (cjs) 包。

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

---

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