带有 babel-loader 的 ES7 async await 函数不工作

Question

我正在尝试使用 webpack 的 babel-loader 在 JavaScript 中运行异步等待函数。我正在使用以下配置：

{
  name: 'client',
  context: path.join(__dirname, 'src', 'static', 'scripts'),
  entry: {
    index: './index.js'
  },
  output: {
    path: path.join(__dirname, 'src', 'static', 'bundles'),
    filename: '[name].js'
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: 'babel',
        query: {
          presets: ['es2015', 'stage-0']
        }
      }
    ]
  },
  resolve: {
    root: path.join(__dirname),
    fallback: path.join(__dirname, 'node_modules'),
    modulesDirectories: ['node_modules'],
  }
}

但它不断推送错误消息：

Module build failed: Error: ./src/static/scripts/index.js: Expected type "Identifier" with option {}

我的 index.js 有这个内容：

console.log('hi from app');

async function hello() {
  return Promise.resolve('hi')
}

async function conversation () {
  const hi = await hello()
  console.log(hi);
}

Answer 1

您好像中了 bug。好像解决了，还没发布

如果等不及发布，可以打commit对应的补丁解决问题。

应用补丁的一种方法：

将以下差异保存到包根文件夹中的文件中（例如 visit.patch）。然后使用 git apply visit.patch.

应用补丁

From 940b86dadbd0151c33c02e89f0b5ff61077c9214 Mon Sep 17 00:00:00 2001
From: Henry Zhu <hi@henryzoo.com>
Date: Thu, 5 Nov 2015 20:10:15 -0500
Subject: [PATCH] transform-regenerator: set node.id to an identifier if null -
 fixes #2835

---
 packages/babel-plugin-transform-regenerator/lib/visit.js | 8 +++++---
 1 file changed, 5 insertions(+), 3 deletions(-)

diff --git a/node_modules/babel-preset-es2015/node_modules/babel-plugin-transform-regenerator/lib/visit.js b/node_modules/babel-preset-es2015/node_modules/babel-plugin-transform-regenerator/lib/visit.js
index 0f68ffc..c4a0d2e 100644
--- a/node_modules/babel-preset-es2015/node_modules/babel-plugin-transform-regenerator/lib/visit.js
+++ b/node_modules/babel-preset-es2015/node_modules/babel-plugin-transform-regenerator/lib/visit.js
@@ -146,6 +146,10 @@ function getOuterFnExpr(funPath) {
   var node = funPath.node;
   t.assertFunction(node);

+  if (!node.id) {
+    node.id = funPath.scope.parent.generateUidIdentifier("callee");
+  }
+
   if (node.generator && // Non-generator functions don't need to be marked.
       t.isFunctionDeclaration(node)) {
     var pp = funPath.findParent(function (path) {
@@ -171,9 +175,7 @@ function getOuterFnExpr(funPath) {
     );
   }

-  return node.id || (
-    node.id = funPath.scope.parent.generateUidIdentifier("callee")
-  );
+  return node.id;
 }

 function getRuntimeMarkDecl(blockPath) {

更新：

好像bug wasn't properly fixed and the commit has been reverted. Looks like it was due to another problem that has been addressed in this pull request.

Answer 2

首先，确保你使用的是所有最新版本的 babel plug-ins:

npm i -D babel-loader babel-polyfill babel-preset-es2015 babel-preset-stage-0 babel-runtime

（我不确定是否真的需要 babel-runtime- YMMV）

在你的 webpack 的 entry 中，使用这个：

  entry: [
    'babel-polyfill',
    './index.js'
  ]

您需要将 babel-polyfill 添加到您的入口脚本以启用 "regeneratorRuntime"，这是 async/await 所需要的。

然后在 module 部分使用 babel-loader（而不是 babel）

  module: {
    loaders: [
      {
        test: /\.js$/,
        exclude: /(node_modules|bower_components)/,
        loader: 'babel-loader',
        query: {
          presets: [
            'es2015',
            'stage-0'
          ]
        }
      }
    ]

应该可以解决问题。

注意：如果您在服务器端使用 Node，则需要在入口脚本的顶部添加一个明确的 require('babel-polyfill'); 以确保识别任何 async/await 语法。

es2015 和 stage-0 不足以填充节点 5 - 相反，请在您的 .babelrc

中使用它

{
  "presets": [
    "node5"
  ]
}

node5 是 babel plug-ins 的集合，我坚持只填充那些缺少的 Node 5.x 片段。它也应该主要与 Node 4.x 一起工作（它有一些小的变化，现在在 ES6 兼容性方面几乎相同。）

您需要先使用 NPM 安装它：

npm i -D babel-preset-node5

Answer 3

对于节点 v8.11 上的预设 env，我从来没有遇到异步函数的问题运行，也不例外。

然后我参考了官方文档，在.babelrc中添加了target，现在可以了

{
  "presets": [
    ["env", {
      "targets": {
        "node": "current"
      }
    }]
  ]
}

Babel documentation

带有 babel-loader 的 ES7 async await 函数不工作

ES7 async await functions with babel-loader not working

javascript

async-await

webpack

babeljs