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

Question

我正在尝试将 ES2017 async/await 语法与 Babel 一起使用。 在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

另一种可能更好的解决方案是模块化您的代码：

• 添加一个index.js，它只导出您要导出的内容并包含polyfill
• 将真正的功能添加到只做一件事的小文件中

Answer 2

由于函数定义如

async function foo() {
    return 10;
}

可以是used before they're defined in javascript，Babel 在编译过程中将其移动到文件顶部。

要解决这个问题，如果可能，请尝试调整您的语法：

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

Answer 3

我认为 require() 调用必须在 async 函数之前（并且由于函数被提升，并且您将它们设置在同一个文件中，因此稍后会加载 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;