使用async/await与babel - require("babel-polyfill")行不在构建文件的顶部

Question

我正在尝试使用与Babel的ES2017 async/await语法.在package.json,我有

"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"
  }

我正在尝试使用的代码是

SRC/index.js

require("babel-polyfill");

async function foo() {
  return 10;
}

我建的文件是

DIST/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

但是,在build.js中,如果我将require("babel-polyfill");行移到顶部,它就可以工作.但我不能每次都手动这样做.

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

Answer 1

由于函数定义如

async function foo() {
    return 10;
}

可以在javascript中定义它们之前使用,Babel在转换过程中将它移动到文件的顶部.

要解决此问题,请尽可能调整语法:

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