Javascript Stencil.js：如何在index.html中使用utils函数

我正在创建一个弹出的stenciljs组件

文件结构：

• 弹出元素
  • src
    • 乌提尔斯
      • 弹出式管理器
    • 组成部分
      • 弹出元素
        • popup-element.tsx
    • index.html

现在我尝试从函数将组件插入DOM： 弹出式管理器.ts

export function createMiniNotification(notificationContent: string, mountTarget: HTMLElement = document.body): HTMLElement {
  const notify = document.createElement('popup-element');
  notify.setAttribute('content', notificationContent);
  mountTarget.appendChild(notify);
}

---

如何在index.html（开发模式）中使用此函数

更新：

您可以将导出添加到

src/index.ts

，然后这些导出将在

/build/index.esm.js

上提供

// src/index.ts

export const createMiniNotification = (msg: string) => console.log(msg);

从“/build/index.esm.js”导入{createMiniNotification}；
createMiniNotification（“Hi”）；

---

原始答案：

我建议您创建一个包装组件，例如。g<代码>应用程序根目录并从那里调用您的函数，例如。G在其

组件didload

生命周期挂钩中：

从'@stencil/core'导入{Component，Host，h}；
从“../utils/popup manager”导入{createMiniNotification}；
@组件（{标记：'应用程序根'}）
出口类批准{
componentDidLoad（）{
createMiniNotification（/*…*/）；
}
render（）{
返回；
}
}

然后，您可以在

index.html

中添加此包装器组件：