素のjsからES Moduleを使用する方法

Question

実現したいこと

ES Module内で定義されたclassを非Moduleから扱う

前提

ES Module(hoge.mjs)があります。
このファイルで定義されたclassを使用したいのですが、諸々の事情より以下の制約があります。

• 利用側のファイル(index.js)をmoduleにすることはできない
• hoge.mjsをhoge.jsへトランスパイルすることはできない

下記の例ではHogeはmoduleのスコープに閉じ込められたままなので、index.jsから参照することができません。

// hoge.mjs
export class Hoge {
  hello(x) {
    return `Hello, ${x}!`
  }
}

// index.js
const hoge = new Hoge()
alert(hoge.hello('World'))

// index.html
<script src="hoge.mjs" type="module"></script>
<script src="index.js"></script>

試したこと

以下のようにwindowへ代入することを試しました。
しかしhoge.mjsの非同期のインポートがindex.jsの実行に間に合わず、
Hogeを参照することはできませんでした。

// load.mjs
import { Hoge } from 'hoge.mjs'
window.Hoge = Hoge

// index.html
<script src="load.mjs" type="module"></script>
<script src="index.js"></script>

Answer 1

動的インポートではダメですか？

(async () => {
    let { Hoge } = await import("./hoge.mjs")
    const hoge = new Hoge()
    alert(hoge.hello('World'))
})()

　
Dynamic imports(ダイナミックインポート)

Comments

[maisumakun]

（「通常のJavaScriptにimport()を書けない」というのは当方の誤解でしたので削除しました。失礼いたしました）

[Lhankor_Mhy]

コメントありがとうございました。

[hoge_fuga]

ありがとうございます。
importがES Module専用のため、import()も同様だろうと勘違いしていました。

Answer 2

しかしhoge.mjsの非同期のインポートがindex.jsの実行に間に合わず、
Hogeを参照することはできませんでした。

Hogeが存在するかどうかをチェックして、代入されるまでsetTimeoutなどで待つという手段は考えられます。

Answer 3

maisumakunさんの案が現実的ですね

(async()=>{
  let tid;
  await new Promise(resolve=>tid=setInterval(()=>{
    if(typeof Hoge!=="undefined"){
      resolve();
      clearInterval(tid);
    }
  })); 
  const h=new Hoge;
  console.log(h.hello('world'));
})();

もしかしたらDOMContentLoadedを待つだけでもいけるかもしれません

window.addEventListener('DOMContentLoaded',()=>{
  const h=new Hoge;
  console.log(h.hello('world'));
});