等待 JavaScript 中的动态导入

Question

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

index.js

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

firstLevel1.js

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

firstLevel2.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 加载的顺序不是我想要正确设置遗留文件的顺序。

为什么我看到的加载顺序与我预期的不同？有什么方法可以让它们同步加载吗？

Answer 1

有点讨厌，但它的一种工作方式如下：

在 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');
};

它可能不会对您的实际需求有用，但它确实会按您期望的顺序加载模块

等待 JavaScript 中的动态导入

Awaiting on dynamic imports in JavaScript

javascript

dynamic-import

es6-module-loader

es6-modules