ES Module を使って export したコードを <script type="module"> ではなく、<script type="text/javascript"> 内で利用したいことがあったので、その方法のメモです。できればやりたくない事ではありますが、やむを得ないケースがありました。
一言で言うと、両者からアクセス可能なグローバルオブジェクトである window を経由して受け渡すことができます。
例えば、myModule.js に以下の関数を定義してエクスポートします。
export function exportedFunc(message) {
console.log(message);
}
これを .html で以下のようにインポートしつつ、window にセットします。
<script type="module">
import { exportedFunc } from '/js/modules/myModule.js';
window.exportedFunc = exportedFunc;
</script>
window にセットしておくと、exportedFunc() を <script type="text/javascript"> 内で呼べるようになります。モジュールのロードが終わっている必要があるので load イベント後に呼び出しています。
<script type="text/script">
window.addEventListener("load", function (e) {
exportedFunc("hello!");
});
</script>
// コンソール出力: hello!ちなみにやむを得ないケースというのは、一部分だけ既存の ES Module を使いたいというケースでした。すべてをモジュール化するのはあまりにコストが高く、かといってコピーして二重メンテにするには気が重いようなケースです。
参考:
https://stackoverflow.com/questions/39380512/how-to-use-js-modules-from-non-module-files
