使用 Babel.js 转译异步等待提案？

Question

有人提议引入 C# 风格 async-await。我知道 Babel.js 将 ES6 转译为 ES5，但是有什么方法可以让它将异步等待转译为 ES5？

Answer 1

Babel v6

从 Babel v6 开始，Babel 本身不再包含任何转换器。你必须明确地specify any feature你想要转换。

预设 - 非 ES2015 环境

实现此功能的最快方法是使用 presets，它已经包含转换 ES2015 和更新提案所需的插件集。对于 async，您将需要 es2015 and es2017 presets and the 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 自己的 "co-routine" 实现。
transform-async-to-module-method：同样将async函数转换为生成器，但将其传递给配置中指定的模块和方法，而不是Babel自己的方法。这允许您使用外部库，例如 bluebird.

如果您的代码运行处于支持生成器的环境中，那么就没有什么可做的了。但是，如果目标环境不支持生成器，你也需要改造生成器。这是通过 transform-regenerator transform. This transform depends on runtime functions, so you will also need Babel's 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 及更早版本

是的，您必须启用 experimental transformers. Babel uses regenerator。

Usage

$ babel --experimental

babel.transform("code", { experimental: true });

Answer 2

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

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

$ npm install babel-runtime

$ babel inputES7.js -o outputES5.js --optional runtime

Answer 3

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

'use strict';

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

有关更多详细信息，请参阅中的代码。

Answer 4

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

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

Usage

$ 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

Answer 5

从今天开始，我通过额外 npm install babel-preset-stage-0 并像

一样使用它来完成这项工作

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

见

使用 Babel.js 转译异步等待提案？

Transpile Async Await proposal with Babel.js?

javascript

async-await

babeljs

ecmascript-next

Babel v6

预设 - 非 ES2015 环境

预设 - ES2015 环境

自定义

示例：

Babel v4 及更早版本