topLevelAwait 对 babel-loader 无效：'await' 只允许在异步函数中使用

Question

webpack5支持topLevelAwait，只需添加以下选项：

//webpack.config.js

module.exports = {
  //...
  experiments: {
    topLevelAwait: true
  },
};

现在我们可以愉快的使用top level await了，像这样：

import Test from './Test';

const _Test = await import("./Test");
console.log(_Test);

效果很好。

但是当我添加 babel-loader 时它不起作用:

module.exports = {
  //...
  experiments: {
    topLevelAwait: true
  },
  module:{
    rules:[
      {
        test: /\.(js|mjs|jsx|ts|tsx)$/,
        exclude: /node_modules/,
        use: {
          loader: 'babel-loader'
        }
      }
    ]
  },
};

它抛出一个错误：

'await' is only allowed within async functions

我该如何解决这个问题？

我需要 topLevelAwait 和 babel-loader。

Answer 1

即使Webpack本身支持，您也需要启用Babel对顶级await的解析，因为Babel必须在Webpack解析文件之前很久就解析文件。

npm install --save-dev @babel/plugin-syntax-top-level-await

然后将其添加到您的 Babel 配置或 Webpack 配置中，例如

  {
    test: /\.(js|mjs|jsx|ts|tsx)$/,
    exclude: /node_modules/,
    use: {
      loader: 'babel-loader',
      options: {
        plugins: ['@babel/plugin-syntax-top-level-await'],
      }
    }
  }

topLevelAwait 对 babel-loader 无效：'await' 只允许在异步函数中使用

topLevelAwait invalid with babel-loader: 'await' is only allowed within async functions

webpack

babeljs

babel-loader

webpack-5