當使用 webpack（v5 通過 webpacker v6）并將介面（例如通過全域變數）匯出到網頁上的其他腳本時，模塊初始化期間決議的承諾是否必須在頁面上的腳本訪問它們之前執行？有沒有辦法確保他們這樣做？頂層會等待作業嗎？
具體來說，假設我有一個匯出到全域庫 FOO 的模塊，如下所示
---In module getting webpacked---
class Foo { ... }
const done = (async function() {
Foo.bar = 10 - (await prom)/(await other_prom)
})()
resolve(5); other_resolve(80); //resolve for prom/other_prom
await done //if we have top level await
export {Foo}
--- In (unprocessed) script tag later ---
new FOO.Foo(20); //This shouldn't execute until AFTER the async function modifies Foo
我希望 new FOO.Foo(20) 在上面的異步函式完成執行之前保證不會執行。除了將所有頁面 javascript 包裝在異步函式中并等待所有初始化承諾之外，有沒有辦法保證在初始化完成之前不會執行此操作？在這一點上，我還不如放棄異步和撰寫回呼函式的細節。
uj5u.com熱心網友回復：
通過全域變數將介面匯出到網頁上的其他腳本
不，不要那樣做。使用全域變數不是一個好習慣，top-level-await 也不會讓任何東西等待。并且非模塊腳本無論如何都不能使用頂級等待。
相反，如果您確實使用了類似的模塊
export class Foo { ... }
Foo.bar = 10 - (await Promise.resolve(5)/(await Promise.resolve(80));
import * as FOO from 'the-first-module';
new FOO.Foo(20);
那么是的，它將按預期作業，并且new Foo在匯入的腳本完成其異步評估之前不會運行。
轉載請註明出處，本文鏈接：https://www.uj5u.com/caozuo/366297.html
標籤：javascript 网络包 浏览器 es6-modules