Static Import Test

• ES6 Module のテストページです。

HTML

<script type="module" src="main.js" async></script>

• JavaScript で alert() を実行しているため、async を指定しないと、highligh.js のシンタックスハイライト表示をブロックしてしまいます。
• highligh.js のコードは、DOMContentLoaded イベントで実行されます。なので、async ではなく defer を指定してもダメです。defer を指定すると、パース終了→DOMツリー構築の後に実行されますが、DOMContentLoaded イベントの発火はこの後であるためです。

main.js

import utils from "./utils.js";
console.log(utils);
utils.say( "Hello, Static Import!");

utils.js

export default {
  say: (msg)=>{
    alert(msg);
  }
};