Question

我想在常规的基本HTML文件中使用通过StencilJS创建的组件。我按照以下步骤操作：

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

npm init stencil

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

npm run build

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

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

<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文件中，从而在某些情况下可以简化分发。它仅在新的重构编译器中可用（安装--next后，可以使用@stencil/core@next标志使用）。