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 已經推出一段時間了）。