javascript - 使用 Babel.js 转译 Async Await 提案？

Question

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

Answer 1

Babel v6

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

预设 - 非 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 transform(+ 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 使用 regenerator .

Usage

$ babel --experimental

---

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