ロゴ メインコンテンツへ
RSSフィード
「Web 開発」に関連する記事一覧

ES Module内のスクリプトをモジュール外から参照する

2023/07/15
(この記事の文字数: 603)

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


  このエントリーをはてなブックマークに追加  

<<「Web 開発」の記事一覧に戻る

コメント(0 件)



コンテンツロード: 0.008 sec
Copyright(C)2006-2024 puarts All Rights Reserved