[翻訳]ブラウザのECMAScriptモジュール

原文リンク:ECMAScript modules in browsers
作者:Jake Archibald
ブラウザは今ESモジュールが使えます.それらは:

Safari 10.1

Chrome 61

Firefox 60

Microsoft Edge 16

  import {addTextToBody} from './utils.mjs';

  addTextToBody('Modules are pretty cool.');

// utils.mjs
export function addTextToBody(text) {
  const div = document.createElement('div');
  div.textContent = text;
  document.body.appendChild(div);
}

オンラインデモンストレーション
スクリプト要素にtype=moduleを追加するだけで、ブラウザはECMAScript moduleとしてインラインスクリプトや外部スクリプトを処理します.
モジュールについては素晴らしい文章がありますが、私がテストや読解のルールを学んだ時に学習したブラウザ特有の内容を共有したいです.
まだサポートされていないいくつかのimportの使い方

//    :
import {foo} from 'https://jakearchibald.com/utils/bar.mjs';
import {foo} from '/utils/bar.mjs';
import {foo} from './bar.mjs';
import {foo} from '../bar.mjs';

//    :
import {foo} from 'bar.mjs';
import {foo} from 'utils/bar.mjs';

有効なモジュールパスの引数は、次の条件の一つに適合していなければなりません.

の完全な非相対URLは、new URL(moduleSpecifier)に伝達されたときにエラーが発生しないようにする.

は/で始まる.

は./で始まる.

は../で始まる.

他の形式のエグゼクティブは、内蔵モジュールなどの将来の使用のために保留されています.
nomoduleを使って後方互換性があります.

オンラインデモンストレーションtype=moduleをサポートするブラウザは、nomoduleの のスクリプトを します.これはサポートモジュールのブラウザにモジュールツリーを し、 のブラウザにレベルダウンバージョンを することができるという です.
ブラウザの

Firefoxブラウザはnomoduleをサポートしていません.Firefox nightlyで されました.

Edgeブラウザはnomoduleをサポートしていません.Edge 16で されました.

Safariブラウザはnomoduleをサポートしていません.Safari 11で しました!10.1に して、ここは に い があります.

デフォルトでは が されます.

オンラインデモンストレーション
する は、2.js、1.mjs、3.js.
scriptは にHTML をブロックしてしまいます. に です. のスクリプトに しては、ブロックを するためにdeferを することができます.もちろん、ドキュメントが されるまでは、スクリプトの を らせて、 の スクリプトと に を します.モジュールスクリプトのデフォルトの はdeferのようです. の 、モジュールスクリプトをHTML にブロックすることはできません.
モジュールスクリプトは、deferの のスクリプトと じ キューを して されます.
インラインスクリプトも されます.

  addTextToBody("Inline module executed");







  addTextToBody("Inline script executed");

オンラインデモンストレーション
は1.js、インラインスクリプト、インラインスクリプト、2.jsです.
のインラインスクリプトはdeferを しますが、インラインモジュールスクリプトは に されます.
Asyncはインライン、 モジュールに しても に されます.

  import {addTextToBody} from './utils.mjs';

  addTextToBody('Inline module executed.');

オンラインデモンストレーション
クイックダウンロードのスクリプトはスローダウンのスクリプトの に されます.
のスクリプトと に、asyncは、スクリプトをダウンロード にHTML をブロックしないようにし、 やかに する. のスクリプトとは なり、asyncもインラインモジュールに される.
のasyncと に、 はDOMに する に されない.
ブラウザの

Firefoxブラウザは、インラインモジュールスクリプト のasyncをサポートしていません.Firefox 59で されました.

モジュールは のみ します.

  import "./1.mjs";

オンラインデモンストレーション
ESモジュールを すれば、それらを も することができますが、それらは だけ されます.もちろん、これはHTMLのスクリプトモジュール- URLのモジュールスクリプトにも されます.ページごとに だけ されます.
ブラウザの

Edgeは、マルチモジュールを する. されましたが、まだ されていません.

にCORSを します

  import 'https://….now.sh/no-cors';

  addTextToBody("This will not execute.");

オンラインデモンストレーション
のスクリプトとは なり、モジュールスクリプト(およびその )は、CORSによって される.これは、ドメインをまたぐモジュールスクリプトが、Access-Control-Allow-Origin: *などの なCORS ヘッダを さなければならないことを する.
ブラウザの

Firefox Demoページのロードに しました.

Edgeは、CORS headerがないモジュールスクリプト(issue)をロードする.Edge 16で されました.

を たない

オンラインデモンストレーション
が じソースから た 、ほとんどのCORSベースのAPIは、 (cookieなど)を しますが、fetch()とモジュールスクリプトは です.それらを しない り、それらは されません.crossorigin を することによって、 モジュールに を することができます. のソースにも を するつもりなら、crossorigin="use-credentials"を してください. のソースは、Access-Control-Allow-Credentials：trueの ヘッダを して しなければならない.
また、「モジュールは だけ する」というルールに する があります.モジュールはそのURLによってマークされているので、 に を たずにモジュールを した 、 このモジュールを すると、2 に られたものは として を たないモジュールである.これはなぜ が のURLに ?を ったのかという で、それらを のものにしました.
: の はすぐに わるかもしれません.fetch()およびモジュールスクリプトは、デフォルトでは、 じソースのURLに を します.イシュー
ブラウザの

Chromeは、 モジュール(issue)を する.Chrome 61で されました!

Safariは、crossorigin を しても、 ソースモジュール(issue)を する を しない.

Edgeは、crossorigin を したとしても、 ソースモジュール(issue)を する を しない.Edge 16で されました.

Edgeは、デフォルトで ソースモジュールを する に、 を しています.

MIMEタイプ
のスクリプトとは なり、モジュールスクリプトはJavaScript MIMEタイプのうちの1つのタイプでなければ、モジュールは されません.HTML はtext/javascriptを することを しています.
ブラウザの

Edge MIMEタイプスクリプト(issue)

これは が している です.もちろん、ESモジュールのブラウザ にとても しています.
、ダイナミック など!
Web Fundamentalsに する を て、モジュールの を く してください.