☰

Firefox で ES2015 インポートが機能しない (トップレベルでも) 質問する

tag-icon • tag-icon javascript html firefox ecmascript-6 es6-modules
Firefox で ES2015 インポートが機能しない (トップレベルでも) 質問する

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

<!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: import declarations may only appear at top level of a module

しかし、ここでインポート ステートメントがどの程度トップレベルに到達できるかはわかりません。このエラーは誤解を招くもので、インポート/エクスポートはまだサポートされていないだけなのでしょうか?

ベストアンサー1

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

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

見つけたのはブラウザでES6インポートを使用する方法に関するこのドキュメント. お勧めの読み物。

これらのブラウザバージョン（およびそれ以降のバージョン）で完全にサポートされています。完全なリストはホームページ):

  • ファイアフォックス60
  • Chrome（デスクトップ）65
  • Chrome (アンドロイド) 66
  • サファリ1.1

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

  • Chrome Canary 60 – の試験的 Web プラットフォーム フラグの背後にありますchrome:flags。
  • Firefox 54 – のdom.moduleScripts.enabled設定about:config。
  • Edge 15 – の試験的な JavaScript 機能設定の背後にありますabout:flags。

おすすめ記事