Javascript 在HTML文件中使用组件的StencilJS_Javascript_Html_Stenciljs

Javascript 在HTML文件中使用组件的StencilJS

javascript html

Javascript 在HTML文件中使用组件的StencilJS,javascript,html,stenciljs,Javascript,Html,Stenciljs,我想在常规的基本HTML文件中使用使用StencilJS创建的组件。我遵循以下步骤：我创建了一个模具组件来创建基本的“我的组件”示例： npm init stencil 我想在HTML文件中使用这个组件，所以我运行了 npm run build 然后，我创建了一个具有以下结构的html项目：然后我将文件从dist文件夹移动到script文件夹。我在html文件的头部添加了脚本标记，它引用component.js文件，如下所示： <script src="script/{compo

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

我创建了一个模具组件来创建基本的“我的组件”示例：

npm init stencil

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

npm run build

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

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

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

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

我在html中使用了如下组件：

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

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

但是我的组件没有被渲染。我得到一个涉及esm.js文件的错误。有人能帮我编译模板组件以用于基本HTML项目吗

模具将您的dist捆绑到模块中，并且根据您在HTML中实际使用的组件，仅延迟加载所需的代码。因此，您应该将整个

dist

文件夹与您的网站一起提供服务

建议在html文件中使用以下两个脚本标记：

（其中

[namespace]

是在

模具.config.ts

中设置的内容）

这将指示支持ES模块的浏览器使用esm捆绑包，其他浏览器将使用ES5（cjs）捆绑包

如果

my component

是您从库中使用的唯一组件，则页面将延迟加载该代码。Stencil知道组件的相互依赖性以及如何相应地延迟加载它们

有一个新的实验性输出目标（称为

customelementsbundle

），允许您将所有内容捆绑到一个js文件中，这在某些情况下可以简化分发。它仅适用于新的重构编译器（安装

@stencil后，可使用--next
标志使用）/core@next

）（Stencil 2已经发布了一段时间了）。

Stencil将您的dist绑定到模块中，并根据您在HTML中实际使用的组件仅延迟加载所需的代码。因此，您应该将整个

dist