Как получить переменную из esm-модуля?

Question

[Сергей]

Здравствуйте.
Есть ли способ получить переменную test во время использование vite?
Пробовал window, но во ответ получаю test is not defined.

<script defer type="module" src="http://localhost:8080/@vite/client"></script>
<script defer type="module">
import test from 'http://localhost:8080/ts/script.ts';
window.test = new test('1');
</script>
<div onclick="test.click(this)">Клик</div>
<script>
console.log(test);
</script>

Answer 1

[catch-a-chalk]

Приветик! Переменные внутри модулей изолированы, поэтому в глобальную область видимости не попадают (от этого и обращение через window не работает). По практике лучше избегать глобальной ОВ:

// script.ts:
 export class Test {
    constructor(public id: string) {}
    click(element: HTMLElement) {
        console.log("Жмак", this.id, element);
    }
}

const test = new Test("1");
export default test;

// html
<script type="module">
  import { Test } from 'http://localhost:8080/ts/script.ts';
  const test = new Test("1");

  // вешаем обработчик через JavaScript, а не через onclick
  document.querySelector("div").addEventListener("click", () => test.click(this));
</script>
<div>Клик</div>

Comments

[Сергей]

Спасибо за ответ.
После build глобальные переменные не будут использоваться.
Я пытаюсь только во время разработки использовать, чтобы передать в onclick переменную.
Возможность сделать все внутри script type="module" не представляется возможным.

Есть какой нибудь костыльный способ получить переменную во время разработки.

[catch-a-chalk]

Сергей, можно так же оставить глобальной ОВ :)
Попробуйте так:

// script.ts
export default class Test {
    constructor(public id: string) {}
    click(element: HTMLElement) {
        console.log("Жмак!", this.id, element);
    }
}

declare global {
    interface Window {
        test?: Test; // по желанию, чтобы избежать ошибок типов
    }
}

const test = new Test("1");
window.test = test; // теперь доступно через window.test

// html

<script type="module">
  import Test from 'http://localhost:8080/ts/script.ts';
  window.test = new Test("1");
</script>

<div onclick="window.test?.click(this)">Клик</div>