javascript - 使用 topLevelAwait 时如何将 Webpack 附加到窗口或作为全局

Question

这里有一些关于如何向浏览器公开 Webpack 模块的现有但过时的问题，以便输出可以包含在script标签中并从全局引用window或作为全局引用。我已经尝试了所有这些，但正如我们所知，跟上 Webpack 的步伐是西西弗斯式的练习，而且似乎output争论正在转向提供output.library对象。

现在，window当我将输出包含在script标签中时，我的模块已成功实现，但是——我怀疑因为它涉及加载外部数据的异步函数——它作为 Promise 加载。但是我不清楚如何在后续<script>标签中处理它，因为 Webpack 使用regenerator-runtime.

以下是我的配置的相关部分：

    output: {
        path: path.resolve(__dirname, "../dist"),
        filename: "myApp.js",
        library: {
            library: "myApp",
            target: "var",
            export: "default"
        },
        experiments: {
            topLevelAwait: true
        },          
    },
    module: {
        rules: [
            {
                test: /\.(js|jsx)$/i,
                exclude: /(node_modules|bower_components)/i,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: [
                            [
                                require.resolve('@babel/preset-env'), {
                                    corejs: 3,
                                    debug: false,
                                    targets: {
                                        browsers: [ 'IE 11', ],
                                    },
                                    useBuiltIns: 'usage'
                                }
                            ]
                        ]
                    }
                }
            },
        // [[ CSS LOADERS, etc ]]
        ]
    }

我已经尝试过为该output.library对象大惊小怪地使用很多不同的参数，但我认为问题在于异步函数在浏览器中作为 Promise 加载：

    <script type="text/javascript" src="dist/myApp.js"></script>
    <script>
        // let test = await myApp("#myAppContainer");
        let test = myApp("#myAppContainer");
    </script>

当我尝试第一次使用时await（暂时不考虑与旧浏览器的兼容性），我在控制台中被告知“等待仅在异步函数和模块的顶层主体中有效。”

我不确定这是否应该在 Webpack 配置或页面尝试使用暴露功能的方式中解决。任何帮助深表感谢！

标签： javascriptwebpackasync-awaites6-promisewebpack-5