Question

我正在尝试使用与Babel的ES2017 async / await语法。在Select A.code ,A.name ,B.Price ,B.quantity From A LEFT JOIN B on B.card = A.card And B.quote = A.quote Where A.flag = '0' And A.date = '2016/09/02'，我有

package.json

我正在尝试使用的代码是

的src / index.js

"babel": {
    "plugins": [
      "babel-plugin-transform-async-to-generator"
    ],
    "presets": [
      "es2015"
    ]
  }

//...

"devDependencies": {
    "babel-cli": "^6.14.0",
    "babel-plugin-transform-async-to-generator": "^6.8.0",
    "babel-polyfill": "^6.13.0",
    "babel-preset-es2015": "^6.14.0"
  }

我的构建文件是

DIST / build.js

require("babel-polyfill");

async function foo() {
  return 10;
}

运行 build.js 时出现此错误 "use strict"; var foo = function () { var _ref = _asyncToGenerator(regeneratorRuntime.mark(function _callee() { return regeneratorRuntime.wrap(function _callee$(_context) { while (1) { switch (_context.prev = _context.next) { case 0: return _context.abrupt("return", 10); case 1: case "end": return _context.stop(); } } }, _callee, this); })); return function foo() { return _ref.apply(this, arguments); }; }(); function _asyncToGenerator(fn) { return function () { var gen = fn.apply(this, arguments); return new Promise(function (resolve, reject) { function step(key, arg) { try { var info = gen[key](arg); var value = info.value; } catch (error) { reject(error); return; } if (info.done) { resolve(value); } else { return Promise.resolve(value).then(function (value) { return step("next", value); }, function (err) { return step("throw", err); }); } } return step("next"); }); }; } require("babel-polyfill");

但是，在 build.js 中，如果我将ReferenceError: regeneratorRuntime is not defined行移至顶部，则可以正常工作。但我无法手动操作每次都这样做。

那么，如何使用babel的async / await语法？

Answer 1

由于定义了诸如

之类的函数

async function foo() {
    return 10;
}

可以是used before they're defined in javascript，Babel在转换过程中将它移动到文件的顶部。

要解决此问题，请尝试调整语法：

const foo = async function() {
    return 10;
}

Answer 2

我认为require()调用必须在异步函数之前进行（并且由于函数被挂起，并且您将它们设置在同一个文件中，以后会加载polyfill。）

在模块系统的早期阶段尝试require('babel-polyfill')。像这样：

// A.js
require('babel-polyfill');
const foo = require('./B.js');

foo().then(console.log);

// B.js
async function foo() {
  return 10;
}

module.exports.foo = foo;

Answer 3

一个不同的，可能更好的解决方案是模块化你的代码：

添加index.js，仅导出您要导出的内容并包含polyfill
将实际功能添加到仅执行一项操作的小文件

使用async / await与babel - require（＆＃34; babel-polyfill＆＃34;）行不在构建文件的顶部

3 个答案: