如何使用 esbuild 将类公开到全局范围？

Question

更新

用户@TKoL 建议在窗口对象中定义一个属性。这产生了我想要实现的结果，尽管我不知道这是否是正确的方法。我暂时就用这个方法。谢谢！

---

我在我的项目中使用esbuild（第一次使用捆绑器/以这种“风格”开发 JS）。该项目是一个小型 Web 组件，我为其开发了一个类，最终用户应该能够在其脚本中使用该类。

// this is the component, which is then bundled and minified by esbuild.
// i have omitted various imports required in the class here.

export default class Widget extends HTMLElement {
    /// code here is not relevant
}

customElements.define('custom-widget', Widget);

就目前情况而言，最终用户可以像这样使用 HTML 中的小部件：

<custom-widget some-custom-attribute="some-value"></custom-widget>

let widget = document.querySelector('custom-widget');
widget.someMethodDefinedInTheClass();

不过，我希望用户也可以通过 JavaScript 来完成这一切。

如何使esbuild将Widget类公开到全局范围？我想这样做是为了启用以下行为：

let wOptions = {}; // object of initialization options for the widget
let widget = new Widget(wOptions);
someContainer.append(widget);
widget.someMethodDefinedInTheClass();

Answer 1

要以任何方式捆绑 js 文件以将任何内容公开到全局范围，您必须将其设置为全局对象（代表全局范围）的属性，例如

globalThis.Widget = Widget;

globalThis关键字是在 JavaScript 中使用全局对象的最佳方式，因为它在浏览器页面、NodeJS 或 Service Worker 环境中的工作方式相同。如果您的代码仅在浏览器页面上执行，您也可以使用window关键字。