ES2015のインポートはFirefoxでは（トップレベルでも）機能しません

Question 1

これらは私のサンプルファイルです：

<!DOCTYPE html>
<html>
<head>
  <title>Test</title>
  <script src="t1.js"></script>
</head>
<body></body>
</html>

t1.js：

import Test from 't2.js';

t2.js：

export const Test = console.log("Hello world");

Firefox 46でページをロードすると、「SyntaxError：インポート宣言はモジュールのトップレベルにのみ表示される可能性があります」と返されますが、インポートステートメントがここでどれだけトップレベルを取得できるかはわかりません。このエラーは赤いニシンですか、インポート/エクスポートはまだサポートされていませんか？

Question 2

実際に発生したエラーは、モジュールをロードしていることを明示的に示す必要があるためでした。その場合にのみ、モジュールの使用が許可されます。

<script src="t1.js" type="module"></script>

このドキュメントで、ブラウザでのES6インポートの使用について見つけました。推奨読書。

これらのブラウザバージョンで完全にサポートされています（およびそれ以降、caniuse.comの完全なリスト）：

Firefox 60
Chrome（デスクトップ）65
Chrome（android）66
Safari 1.1

古いブラウザでは、ブラウザでいくつかのフラグを有効にする必要がある場合があります。

Chrome Canary 60 –のExperimental WebPlatformフラグの背後chrome:flags。
Firefox 54 –でdom.moduleScripts.enabled設定しabout:configます。
エッジ15–のExperimental JavaScriptFeatures設定の背後about:flags。

Question 3

これはもう正確ではありません。 現在のすべてのブラウザがES6モジュールをサポートするようになりました

以下の元の回答

importMDNから：

現時点では、この機能はどのブラウザにもネイティブに実装されていません。これは、Traceurコンパイラ、Babel、Rollupなどの多くのトランスパイラーに実装されています。

ブラウザはをサポートしていませんimport。

ブラウザのサポートテーブルは次のとおりです。

ES6モジュールをインポートする場合は、トランスパイラー（たとえば、babel）を使用することをお勧めします。

Question 4

ファイルのインポート中に.jsファイル拡張子を使用するだけで同じ問題が解決しました（type="moduleスクリプトタグで設定することを忘れないでください）。

単に書く：

import foo from 'foo.js';

の代わりに

import foo from 'foo';

Question 5

type=moduleモジュールをインポートおよびエクスポートするスクリプトを追加すると、この問題が解決します。

Question 6

スクリプトでタイプを指定する必要があり、エクスポートはデフォルトである必要があります。たとえば、あなたの場合は、

<script src='t1.js' type='module'>

t2.jsの場合、このようにエクスポート後にdefaultを使用し、 「ここで式をエクスポートします」（ここで変数を使用することはできません）。あなたはこのような機能を使うことができます、

export default function print(){ return console.log('hello world');}

インポートの場合、インポート構文は次のようになります 。importprint from './ t2.js'（ファイル拡張子と./を同じディレクトリに使用） ..これがお役に立てば幸いです。

Question 7

議論のために...

カスタムモジュールインターフェイスをグローバルウィンドウオブジェクトに追加できます。ただし、お勧めしません。一方、DOMはすでに壊れており、何も持続しません。私はこれを常に使用して、動的モジュールをクロスロードし、カスタムリスナーをサブスクライブします。これはおそらく答えではありませんが、機能します。スタックオーバーフローには、「Spork」と呼ばれるイベントを呼び出すmodule.exportがあります-少なくとも更新されるまで...

//  spam the global window with a custom method with a private get/set-interface and     error handler... 

window.modules = function(){
  window.exports = {
    get(modName) {
      return window.exports[modName] ? window.exports[modName] : new Error(`ERRMODGLOBALNOTFOUND [${modName}]`)
    },
    set(type, modDeclaration){
      window.exports[type] = window.exports[type] || []
      window.exports[type].push(modDeclaration)

    }
  }

}

//  Call the method
window.modules()

//  assign a custom type and function
window.exports.set('Spork', () => console.log('SporkSporSpork!!!'))


// Give your export a ridiculous event subscription chain type...
const foofaalala = window.exports.get('Spork')

// Iterate and call (for a mock-event chain)
foofaalala.forEach(m => m.apply(this))

//  Show and tell...
window