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

Question

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

//webpack.config.js

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

现在我们可以愉快地使用顶级等待，如下所示：

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 对顶级等待的解析，因为 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'],
      }
    }
  }