web-dev-qa-db-ja.com

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宣言はモジュールの最上位レベルにのみ表示される場合があります」を返します。このエラーは赤いニシンで、インポート/エクスポートはまだサポートされていませんか？

javascriptfirefoxecmascript-6
52
Christoph Burschka

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

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

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

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

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

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

  • Chrome Canary 60 – chrome:flagsのExperimental Web Platformフラグの背後。
  • Firefox 54 – dom.moduleScripts.enabledのabout:config設定。
  • Edge 15 – about:flagsのExperimental JavaScript Features設定の背後。

ES6のインポートは広くサポートされていませんが、webpackを使用してプロジェクトをコンパイルするのに費やす時間を節約するために、開発において確かに素晴らしいことを覚えておいてください。

84
Tomáš Zato

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

以下の元の回答

_import on MDN から：

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

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

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

enter image description here

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

13
Josh Beam

スクリプトでそのタイプを指定する必要があり、エクスポートはデフォルトである必要があります。

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

t2.jsの場合、このようにエクスポート後にデフォルトを使用しますexport default 'here your expression goes'（ここでは変数を使用できません）。このような関数を使用できます

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

インポートの場合、インポート構文は次のようになります'./ t2.js'から印刷をインポート（同じディレクトリにファイル拡張子と./を使用） .. ！

0
S. K. Biswas