JSのModuleについて

JSのモジュールについてMDNのガイドを読んだまとめ
JavaScript モジュール

導入背景からの利点

抜粋
・複雑なプロジェクトでは、必要に応じて JavaScript プログラムを別個のモジュールに分割し、インポートできる仕組みが必要です。
・ブラウザーはモジュールの読み込みを最適化することができ、ライブラリーを使用してクライアント側で余分な処理や余分なラウンドトリップを行うよりも効率的です。

簡単に言えば
長過ぎるJSは読みづらいし、htmlタグにscriptタグを大量に書くのも管理がしづらいから
1つのjsファイルで必要なファイルを読み込めるようにし
スコープの貼り方なども最適化された作業環境を一発で作りましょう。
というお話。

拡張子「.mjs と .js」 ※Node.jsサーバーの場合を除く

抜粋
ブラウザーでモジュールを正しく動作させるためには、サーバーが Content-Type ヘッダーで JavaScript の MIME タイプ、
例えば text/javascript などを含めて提供していることを確認する必要があります。

MDNガイドのサンプルプログラムでは一貫して「.js」でモジュールを使用しています。
そして上記のように.mjsを利用するにはサーバーが.mjsを「text/javascript」として認識する必要があります。
つまり .mjs と .js は拡張子が違ってもサーバーの認識は同じjavascriptです。
ただしブラウザの解釈が異なるので別のファイルのように見えるもの。

そしてMDNガイドでは「サーバーが.mjsに対応しているかわからないからここでは.jsを使う」と書かれています。
つまりmoduleだからといって何でもかんでも.mjsで作ってたら詰む可能性があるということです。


ちなみにphp7.6が使えるxamppは.mjsを認識しません。
php8.2が使える最新のxamppでは対応。

あと
<script type="text/javascript" src="./js/base.mjs"></script>
と指定すると(当然ですが).mjsをjavascriptとして使用できます。
※「type="text/javascript"」はなくてもOK

拡張機能での利用

moduleを生htmlで使うとcorsエラーが発生するのですが

拡張機能のサイドパネルで「type="module"」を指定したり
拡張子.mjsを使ってもエラーになりません。
不思議。

また(当然)「background」と「contents-script」では使用できません。
ポップアップは恐らく使用可能。

気になった点

JavaScript 以外のリソースの読み込み
・外部ファイルをチェック付きでオブジェクト化するのは便利。

モジュールとクラシックスクリプトとのその他の違い
・モジュール内部では自動的に厳格モード(use strict)が使われる

動的なモジュールの読み込み

抜粋
動的インポートのもう一つの利点は、スクリプト環境であっても常に利用できるということです。
したがって、HTMLに既存の <script> タグがあり、そのタグに type="module" がない場合でも、モジュールとして配布されているコードを動的にインポートして再利用することができます。

こちらも生htmlで記述するとcorsエラーは出る。