ES6はブラウザモジュールをインポートおよびエクスポートを使用しています

各ブラウザES6モジュールのインポート、エクスポートのサポートケースの場合

サファリ10.1。
クローム61。
設定： - Firefoxの54 dom.moduleScripts.enabledの背後には、およそに設定します。
エッジ16。

ブラウザ間でのES6のインポートとエクスポート

1.表示宣言型=「モジュール」

スクリプト内のブラウザがモジュールES6として扱うことに関連するコードであろうように、タイプ=「モジュール」を追加します

<script type="module"> 
    import {addTextToBody} from './utils.js'; 
    addTextToBody('Modules are pretty cool.'); 
</script>

2. Doが「裸」のパスなどを書きません。

<script type="module"> 
    import {addTextToBody} from 'utils.js';  // error
    addTextToBody('Modules are pretty cool.'); 
</script>

直接書き込み「utils.jsは」文句を言うでしょう
あなたは、絶対パスと相対パスを書くことができますが、同じレベルのファイルを以下の場合でも、直接ファイル名を書き込むことはできません。また、」./name.js'を追加
それ以外のブラウザがパスを認識しない、ファイル名のサフィックス.jsファイルでなければなりません。

3.どのように下位互換性

下位互換性のあるブラウザを達成するために使用「nomodule」キーワード

<script type="module" src="module.js"></script>
<script nomodule src="fallback.js"></script>

私はそれをこのように理解し、古いブラウザ自体は（まだヘクタールダウンロード）、タイプ=「モジュール」jsファイルを認識しないタイプ=「モジュール」jsのコードを実行するためにそこに行く必要はありません。
それはnomodule、通常の実行を無視するように、これはJSが特定nomoduleあり、nomoduleキーワードを認識しません。
サポートタイプ=ブラウザの「モジュール」、それが自動的にキーワードJSを実行nomoduleそこに行くだろう。さえないの下にダウンロードします。
左通じだから、下位互換性機能（この私たちは、あなたがすぐに理解することができ、別のブラウザを使用するようにしてください）

唯一の問題は、ES6のサポートタイプ=「モジュール」が特徴というクラスブラウザはありますが、それはnomoduleキーワードをサポートしていません。言い換えれば、そこでもnomoduleのロゴあれば、それはJSをダウンロードして実行するために行くだろう。それはタイプ= JSの「モジュール」を行っていたにもかかわらず。
これらのブラウザ

Firefoxはnomodule（問題）をサポートしていません。毎晩のFirefoxで修正されました！
エッジはnomodule（問題）をサポートしていません。エッジ16で修正されました！
サファリ10.1 nomoduleをサポートしていません。サファリ11で修正されました！

4.デフォルトのロード

タイプ=「モジュール」はロードのデフォルト延期ロードで使用されています。

延期と非同期について：延期と非同期ロードコードが非同期です。しかし、正常終了のレンダリング（DOM構造が完全に生成されるだけでなく、他のスクリプトの実行が完了すると）、メモリにページ全体まで待つ延期は、実行されます。非同期ダウンロードしたら、レンダリングエンジンは、スクリプトの実行後、レンダリング壊し、その後、レンダリングを継続します。文は、「完全な再レンダリングの実行」延期、非同期「が実装にダウンロード。」されますスクリプトを複数延期がある場合に加えて、それはそれらに基づいてロードされたページの順に表示され、保証複数の非同期スクリプトのロード順序はありません。

<!-- This script will execute after… -->
<script type="module" src="1.js"></script>

<!-- …this script… -->
<script src="2.js"></script>

<!-- …but before this script. -->
<script defer src="3.js"></script>

インラインの<script>積載モード延期を使用しています

<!-- This script will execute after… -->
<script type="module">
  addTextToBody("Inline module executed");
</script>

<!-- …this script… -->
<script src="1.js"></script>

<!-- …and this script… -->
<script>     //这里默认采用defer，避免歧义，建议手动加上
  addTextToBody("Inline script executed");
</script>

<!-- …but before this script. -->
<script defer src="2.js"></script>

それはバックでのjsファイルを呼び出して、伝統的なインラインjsのスクリプトである場合や、エラー。

<!-- This script will throw error… -->
<script defer>     //这里就算采用defer也会报错
  addTextToBody("Inline module executed");
</script>

<script>     
  addTextToBody("Inline script executed");
</script>

非同期ロードの5のサポート

TYPE =「モジュール」（インポートそのインライン含む）負荷非同期的に使用することができる、のローディング非同期（async）を採用通常当量JS

<script type="module" async></script>

ブラウザの問題
Firefoxはインラインモジュールスクリプトに非同期をサポートしていません（問題）

6.一度だけ実行します

<スクリプトタイプ=「モジュール」> ES6ためのローディング機構が一度だけ行わ、それは複数のインポートインポートプロセスとして扱われます

<!-- 1.js 只会被加载执行一次-->
<script type="module" src="1.js"></script>
<script type="module" src="1.js"></script>
<script type="module">
  import "./1.js";
</script>

<!--  普通JS 也只会被加载一次，但是会被执行多次-->
<script src="2.js"></script>
<script src="2.js"></script>

ブラウザの問題の
エッジ実行モジュールを複数回（の問題）。固定、まだ出荷されていない（修正して出荷するエッジ17を期待します）。

CORSについて7.

デフォルトでは、タイプ=「モジュール」は少し伝統的なjsのですか絵が完全に異なっているクロスドメインをサポートしていません。伝統JSまたはデフォルトの画像がクロスドメインをサポートすることです。あなたは=「モジュール」をサポートクロスドメインを入力します。ヘッダー内の必要性は、ショーに有効なステートメントCORSを与えるために、サーバから返されました

Access-Control-Allow-Origin: *

ブラウザの問題
Firefoxはデモページ（問題を）ロードに失敗しました。
エッジ負荷がCORSヘッダ（問題）せずにスクリプトをモジュール。エッジ16で修正されました！

9.Mime-種類

伝統的な<スクリプト>とは異なり、<スクリプトタイプ= 「モジュール」> ブラウザに有効なJavaScriptのMIMEタイプ。
それ以外の場合は、モジュールへの要求は、JavaScriptを実行しません。

ブラウザの問題
エッジは無効なMIMEタイプ（問題）でスクリプトを実行します。

最後に、私は言いたいです

没想到任何一个小功能，仔细去研究都有这么多的知识点。码文不易，各位给个赞可好。
转载请注明出处