Как открыть класс в глобальной области видимости с помощью esbuild?

Question

Обновить

Пользователь @TKoL предложил определить свойство в объекте окна. Это дает результат, которого я хотел достичь, хотя я не знаю, правильно ли это делать. Я пока буду использовать этот метод. Благодаря!

---

Я использую esbuild в своем проекте (впервые использую сборщик / разрабатываю JS в этом "стиле"). Проект представляет собой небольшой веб-компонент, для которого я разработал класс, который конечный пользователь должен иметь возможность использовать в своих сценариях.

// 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 или в рабочей среде службы. Если ваш код будет выполняться только на странице браузера, вы также можете использовать windowключевое слово.