在JavaScript中等待动态导入

在JavaScript中等待动态导入,javascript,es6-modules,es6-module-loader,dynamic-import,Javascript,Es6 Modules,Es6 Module Loader,Dynamic Import,在尝试移植一些JS代码以使用模块时,我遇到了这个我无法解释的特殊情况。我正在设置我的主JS文件,以便为我的主入口点进行动态导入,而它们又为它们所需的所有文件进行导入。设置如下所示: index.js (async function () { await import('./firstLevel1.js'); await import('./firstLevel2.js'); })() (async function () { await import('./secon

在尝试移植一些JS代码以使用模块时,我遇到了这个我无法解释的特殊情况。我正在设置我的主JS文件,以便为我的主入口点进行动态导入,而它们又为它们所需的所有文件进行导入。设置如下所示:

index.js

(async function () {
    await import('./firstLevel1.js');
    await import('./firstLevel2.js');
 })()
(async function () {
    await import('./secondLevel1.js');
    await import('./secondLevel2.js');
})()
(async function () {
    await import('./secondLevel3.js');
    await import('./secondLevel4.js');
})()
firstLevel1.js

(async function () {
    await import('./firstLevel1.js');
    await import('./firstLevel2.js');
 })()
(async function () {
    await import('./secondLevel1.js');
    await import('./secondLevel2.js');
})()
(async function () {
    await import('./secondLevel3.js');
    await import('./secondLevel4.js');
})()
firstLevel2.js

(async function () {
    await import('./firstLevel1.js');
    await import('./firstLevel2.js');
 })()
(async function () {
    await import('./secondLevel1.js');
    await import('./secondLevel2.js');
})()
(async function () {
    await import('./secondLevel3.js');
    await import('./secondLevel4.js');
})()
因为我导入的一些代码是遗留代码,所以我将index.js的脚本标记设置为async=“false”,以确保所有文件都以正确的顺序加载。在这个特定的示例中,我希望加载顺序是index.js、firstLevel1.js、secondLevel1.js、secondLevel2.js、firstLevel2.js。secondLevel3.js和secondLevel4.js。但当我在chrome中查看加载顺序时,我看到的就是这个

这对我来说是个问题,因为JS加载的顺序不是我想要正确设置遗留文件的顺序


为什么我看到的加载顺序与我预期的不同?有没有办法让它们同步加载?

这有点麻烦,但有一种方法是:

firstLevel?.js
中,导出您将在
index.js中等待的异步函数

index.js

(async function () {
    await (await import('./firstLevel1.js')).default();
    await (await import('./firstLevel2.js')).default();
})();
firstLevel1.js

export default async function () {
    await import('./secondLevel1.js');
    await import('./secondLevel2.js');
};
firstLevel2.js

export default async function () {
    await import('./secondLevel3.js');
    await import('./secondLevel4.js');
};

它可能对您的实际需求没有多大用处,但它确实按照您期望的顺序加载模块

我想知道
import()
的规范是否曾设想过这种用法
wait import()
将等待文件导入,规范中没有任何关于等待模块内的子模块的建议,考虑到它们可能永远不会加载(因为它们是动态的),因此sub(动态的)是有意义的模块不会以这种方式产生影响我的理解是,当我们执行
await import()
时,我们实际上会等待加载和解析文件,这意味着我们将运行文件中的所有全局代码,其中包含其他文件的导入。这意味着我们将同步加载所有文件。但看起来这不是
等待导入()
所做的。你的建议对我有效,但我仍然不明白为什么有必要。是的,但动态导入中的动态导入不是等待。。。因为顶层不需要等待下一层导入(动态),这是没有意义的,因为并非所有的动态导入都必须导入。这是可行的,但我仍然不明白为什么有必要。因为动态导入系统不是为你所想的而设计的:p