javascript - 如何使用 webpack 将 await 关键字转换为 es5？

Question

我这辈子都想不出如何将使用 await 的代码转换为有效的 es5。我正在使用 webpack 3 并且可以成功地将 async 函数转换为返回 promises 的函数，但是它在 await 上出错:Module build failed: SyntaxError: ...: await 是保留字。我假设我需要一个特定的 babel-loader 插件，但我没有看到一个用于 await 的插件。这是我的 webpack 配置的相关部分:

     module: {   
        rules: [{
          test: /\.js$/,
          exclude: /(node_modules|bower_components)/,
          use: {
            loader: 'babel-loader',
            options: {
              presets: ['es2015', 'stage-0'],
              plugins: ["syntax-async-functions","transform-regenerator"],
            }
          }
        }
      ]
    }

我想做的事情可行吗？

更新:

现在这是我的 webpack 配置的相关部分:

    module: {
        rules: [
        {
          test: /\.js$/,
          exclude: /(node_modules|bower_components)/,
          use: [{
            loader: 'nodent-loader',
            options: {
              promises: true,
              wrapAwait: true
            }
           },
           {
            loader: 'babel-loader',
            options: {
              presets: ['es2015', 'stage-0'],
              plugins: ["syntax-async-functions","transform-regenerator"],
            }
           }
          ]
        }
      ]
    }

这是我要编译的代码:

module.exports = async function() {
    var x = await wait()
}

async function wait() {
    return new Promise(function(resolve) {
        setTimeout(function() {
            resolve()
        },1000)
    })
}

Answer 1

您实际上在错误的函数上声明了 async。

您的wait 函数不是异步的。您调用它，它会立即返回 promise 。

您需要将async 添加到this.init，这是一个异步函数。它不会立即返回，因为它需要 await promise 来解决。

引用文档:https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function