web-dev-qa-db-ja.com

ES6インポートの定義された実行順序は何ですか？

インポートしたモジュールの実行順序をインターネットで検索してみました。たとえば、次のコードがあるとします。

import "one"
import "two"
console.log("three");

どこ one.jsおよびtwo.jsは次のように定義されます。

// one.js
console.log("one");

// two.js
console.log("two");

コンソール出力は次のように保証されていますか？

one
two
three

それとも未定義ですか？

javascriptecmascript-6es6-module-loader
32
Max

インポートされたES6モジュールは非同期で実行されます。ただし、すべてのインポートは、スクリプトがインポートを実行する前に実行されます。これにより、ES6モジュールは、たとえば、async属性のない Node.jsモジュール または _<script>_タグ とは異なります。 ES6モジュールは、読み込みに関しては AMD仕様 に近くなります。詳細については、Axel Rauschmayerによる セクション16.6.1 のExploring ES6を参照してください。

したがって、上記の例では、実行順序は保証されません。考えられる結果は2つあります。あなたはこれを見るかもしれません：

_one
two
three
_

またはこれを見るかもしれません：

_two
one
three
_

つまり、インポートされた2つのモジュールは、console.log()呼び出しを任意の順序で実行できます。 お互いに関して非同期です。ただし、それらはインポートするスクリプトの前に実行されるため、_"three"_は最後に記録されることが保証されています。

つまり、 ES6モジュールを実装する最新のブラウザーはありません 。 Babel などのトランスパイラーがこの点で元の仕様に従っているかどうかはわかりません。

更新

以下のコメント @ BenjaminGruenbaum's のコメントを踏まえて、私はこれをより詳しく検討することにしました。上記のソースにもかかわらず、モジュールの読み込みが非同期であることを 仕様自体 に明確に記載されていませんでした（確かに、ネイティブの英語を話す人として、仕様は少し読みにくいと思います）。その場合、インポートが実行される順序は実装に依存します。そうは言っても、同じ結論が成り立ちます：特定の順序で実行されているインポートを期待することはできません。

24
McMath