webpack - 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

你需要启用 Babel 对顶层 await 的解析，即使 Webpack 本身支持它，因为 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'],
      }
    }
  }