ブラウザのJavaScriptでimportしたclassが呼び出せなくて沼った忘備録

やりたかったこと

• JavaScriptのライブラリの拡張モジュールを作りたかった。
• Node.jsのnpmでも、ピュアJSのCDNでも読み込める前提で開発したい。
• 諸事情により、HTML上のscriptタグ内で読み込みたかった。

沼った部分

• HTMLのscriptタグでimportしたclassが呼び出せない。
• ブラウザのconsoleには クラス名 is not defined のエラーのみ。

原因と結論

クラスモジュールをインポートしたscriptタグとは、 別のscriptタグからは呼び出せない。

NGな例

// モジュールをインポート
<script type="module">
	import HOGE from "./hoge.js"
</script>

// 別のscriptタグから呼び出そうとするとNG
<script>
	console.log( HOGE );
	// => HOGE is not defined
</script>

OKな例

モジュールをインポートしたscriptタグ内からなら、呼び出せた。

// モジュールをインポートしたタグ内で処理を行う
<script type="module">
	import HOGE from "./hoge.js"
	// 同じタグ内なら呼び出せる
	console.log( HOGE );
	// => HOGE HOGE !!
</script>

まとめ

忘備録なので要点以外は色々すっ飛ばしてます。すみません。
インポートしたscriptタグ内でグローバルに定義し直せば、タグ外からでも呼び出せるのかも。

解決のお役に立てたようでしたら、イイネを押していただけますとモチベアップにつながります。
よろしくお願いします。