Каков определенный порядок выполнения импорта 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

Или это undefined?

Ответ 1

Импортированные модули ES6 выполняются асинхронно. Тем не менее, все импорт выполняется до script, выполняющего импорт. Это делает модули ES6 отличными от, например, Node.js modules или <script> без атрибута async. Модули ES6 ближе к спецификации AMD, когда дело доходит до загрузки. Более подробно см. раздел 16.6.1 Изучения ES6 от Axel Rauschmayer.

Итак, в приведенном выше примере порядок выполнения не может быть гарантирован. Возможны два возможных результата. Вы можете увидеть это:

one
two
three

Или вы можете это увидеть:

two
one
three

Другими словами, два импортированных модуля могут выполнять свои вызовы console.log() в любом порядке; они асинхронны относительно друг друга. Но они будут выполняться до script, который импортирует их, поэтому "three" гарантированно будет зарегистрирован последним.

Тем не менее, ни один современный браузер не реализует модули ES6. Я не знаю, соответствуют ли в этом отношении транспилеры, такие как Babel.

Update

В свете @комментариев Бенджамина Грюенбаума ниже, я решил более внимательно изучить это. Несмотря на источник выше, я не мог найти его четко сформулированным в самой спецификации , что загрузка модуля является асинхронной (хотя, по общему признанию, как носитель английского языка, Я считаю, что спецификация немного трудна для чтения). Если это так, то порядок выполнения импорта будет зависящим от реализации. Тем не менее, имеет место тот же вывод: вы не можете рассчитывать на то, что ваш импорт будет выполнен в любом конкретном порядке.