ブラウザでJavaScript Module機能(import, export)を使う方法

https://ja.javascript.info/modules-intro

基本

数年前はブラウザでjavascriptのimport, export構文を利用することができなかったが、2020年7月現在はブラウザ上でも利用できるようになっている。
ただし現実的には現在でもWebPack等でビルドされてモジュール機能を使わない形に変換されたスクリプトが利用されることが多い。
以下のような制約がある。
・`type="module"`の属性をつけたscriptタグ内でないと利用できない。
・ローカルファイルをブラウザで開いた状態では動かないため、localhostでもいいのでwebサーバを立ててやらないと動作テストができない。
・モジュール内部では自動的に Strict モード になる。
・モジュール内は独自のグローバルスコープを持つ。例えば JavaScript コンソールからはアクセスできない。
・グローバルスコープでthisを参照した場合、windowではなくundefinedになる。

サンプル

index.html

<html>
<head>
<script type="module">
import importedFunction from './module.js';
importedFunction();
</script>
</head>
<body>
ok
</body>
</html>

module.js

export default function () {
  console.log("hello. module!");
}

ローカルではモジュール機能は利用できない

https://developer.mozilla.org/ja/docs/Web/JavaScript/Guide/Modules

ローカルから (つまり file:// URL を使って) HTML ファイルを読み込もうとすると、
JavaScript モジュールのセキュリティ要件のために、CORS エラーが発生します。
テストはサーバー経由で行う必要があります。