57

有一个关于引入 C# 风格的提议async-await。我知道 Babel.js 将 ES6 转译为 ES5，但有什么办法可以将其转译为 async-awaitES5吗？

4

5 回答 5

99

通天塔 v6

从 Babel v6 开始，Babel 本身不再包含任何转换器。您必须明确指定要转换的任何功能。

预设 - 非 ES2015 环境

完成这项工作的最快方法是使用已经包含转换 ES2015 和更新提案所需的插件集的预设。对于async，您将需要es2015和es2017预设和runtime插件（不要忘记babel-runtime按照文档中的说明进行安装）：

{
  "presets": [
    "es2015",
    "es2017"
  ],
  "plugins": [
    "transform-runtime"
  ]
}

预设 - ES2015 环境

如果您在支持 ES2015（更具体地说，生成器和 Promises）的环境中运行代码，那么您只需要 es2017 预设：

{
  "presets": [
    "es2017"
  ]
}

风俗

要仅转换async功能，您将需要以下插件。

syntax-async-functions在任何情况下都需要能够解析异步函数

为了运行异步功能，您需要使用

  • transform-async-to-generator: 将async函数转换为生成器。这将使用 Babel 自己的“协程”实现。
  • transform-async-to-module-method: 也将async函数转换为生成器，但将其传递给配置中指定的模块和方法，而不是 Babel 自己的方法。这允许您使用外部库，例如bluebird.

如果您的代码在支持生成器的环境中运行，那么就没有什么可做的了。但是，如果目标环境不支持生成器，您还必须转换生成器。这是通过transform-regenerator转换完成的。这个转换依赖于运行时函数，所以你还需要 Babel 的transform-runtime转换（+babel-runtime包）。

例子：

异步到生成器

{
  "plugins": [
    "syntax-async-functions",
    "transform-async-to-generator"
  ]
}

异步到模块方法

{
  "plugins": [
    "syntax-async-functions",
   ["transform-async-to-module-method", {
     "module": "bluebird",
     "method": "coroutine"
   }]
  ]
}

异步到生成器 + 再生器

{
  "plugins": [
    "syntax-async-functions",
    "transform-async-to-generator",
    "transform-regenerator",
    "transform-runtime"
  ]
}

Babel v4 及更早版本

是的，您必须启用实验变压器。Babel 使用regenerator。

用法

$ babel --experimental

babel.transform("code", { experimental: true });
于 2015-02-25T00:43:43.417 回答
6

自（Felix Kling 2 月 25 日）以来，此解决方案可能已经发生了变化，或者可能还有不止一种方法可以使用异步等待。

对我们有用的是像这样运行 Babel

$ npm install babel-runtime

$ babel inputES7.js -o outputES5.js --optional runtime
于 2015-08-30T17:17:21.847 回答
4

我今天通过做一个额外的工作npm install babel-preset-stage-0并像使用它一样使用它

var babel = require("babel-core");
var transpiled = babel.transform(code, { "presets": ["stage-0"] });

看

于 2015-12-08T12:51:18.387 回答
2

批准的答案现在似乎已经过时了。实验标志已被弃用，取而代之的是阶段。

http://babeljs.io/blog/2015/03/31/5.0.0/#experimental-option

用法

$ babel --stage 0

babel.transform("code", { stage: 0 });

阶段 0

  • es7.classProperties
  • es7.comprehensions

阶段1

  • es7.asyncFunctions
  • es7.decorators
  • es7.exportExtensions
  • es7.objectRestSpread

第 2 阶段（第 2 阶段及以上默认启用）

  • es7.exponentiationOperator
于 2015-12-06T14:15:04.733 回答
2

也许现在更先进了；只需将 babel 的东西放在一个单独的文件中：

'use strict';

require('babel/register'); // Imports babel - auto transpiles the other stuff
require('./app'); // this is es6 - gets transpiled

有关更多详细信息，请参阅我的代码how-can-i-use-es2016-es7-async-await-in-my-acceptance-tests-for-a-koa-js-app。

于 2015-10-28T01:57:48.720 回答