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

Transpile Async Await proposal with Babel.js?

提问by tldr

There is a proposal for introducing C# style async-await. I know Babel.js transpiles ES6 to ES5, but is there any way to make it transpile async-await to ES5?

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

回答by Felix Kling

Babel v6

通天塔 v6

As of Babel v6, Babel doesn't contain any transformers itself anymore. You have to explicitly specify any featureyou want to transform.

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

Presets - non ES2015 environment

预设 - 非 ES2015 环境

The quickest way to get this working is to use presetswhich already contain the set of plugins needed to transform ES2015 and newer proposals. For async, you will need the es2015and es2017presets and the runtimeplugin (don't forget to install babel-runtimeas described in the documentation):

实现此功能的最快方法是使用已经包含转换 ES2015 和更新提案所需的插件集的预设。对于async，你将需要es2015与es2017预置和runtime插件（不要忘记安装babel-runtime，如文档中描述的）：

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

Presets - ES2015 environment

预设 - ES2015 环境

If you run the code in an environment that supports ES2015 (more specifically, generators and Promises), then all you need is the es2017 preset:

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

{
  "presets": [
    "es2017"
  ]
}

Custom

风俗

To only transform the asyncfunctions, you will need the following plugins.

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

syntax-async-functionsis needed in any every case to be able to parse async functions

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

In order to runthe async function, you either need to use

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

• transform-async-to-generator: Converts the asyncfunction into a generator. This will use Babel's own "co-routine" implementation.
• transform-async-to-module-method: Also converts the asyncfunction to a generator, but passes it to the module and method specified in the configuration instead of Babel's own method. This allows you to use external libraries such as bluebird.

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

If your code runs in an environment that supports generators, then there is nothing left to do. However, if the target environment does notsupport generators, you will also have to transform the generator. This is done via the transform-regeneratortransform. This transform depends on runtime functions, so you will also need Babel's transform-runtimetransform (+ the babel-runtimepackage).

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

Examples:

例子：

Async to generator

异步生成器

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

Async to module method

异步到模块方法

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

Async to generator + regenerator

异步生成器 + 再生器

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

---

---

Babel v4 and older

Babel v4 及更早版本

Yes, you have to enable the experimental transformers. Babel uses regenerator.

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

Usage

$ babel --experimental

---

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

用法

$ babel --experimental

---

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

回答by Tim

This solution may have changed since (Feb 25 Felix Kling) or perhaps there is still more than one way to use async await.

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

What worked for us was to run Babel like so

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

$ npm install babel-runtime

---

---

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

回答by Tobi

I got this working as-of today by doing an additional npm install babel-preset-stage-0and using it like

我通过做一个额外的npm install babel-preset-stage-0和使用它来完成今天的工作

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

See

看

• http://babeljs.io/docs/usage/options/#options
• http://babeljs.io/docs/plugins/preset-stage-0/

• http://babeljs.io/docs/usage/options/#options
• http://babeljs.io/docs/plugins/preset-stage-0/

回答by egeland

Perhaps even more up-to-date now; just put the babel stuff in a separate file:

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

'use strict';

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

See my code at how-can-i-use-es2016-es7-async-await-in-my-acceptance-tests-for-a-koa-js-appfor some more details.

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

回答by Matt Dell

The approved answer seems to be outdated now. The experimental flag has been deprecated in favor of stage.

批准的答案现在似乎已经过时了。实验标志已被弃用，以支持 stage。

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

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

Usage

$ babel --stage 0

---

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

用法

$ babel --stage 0

---

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

Stage 0

阶段 0

• es7.classProperties
• es7.comprehensions

• es7.class 属性
• es7.comprehensions

Stage 1

阶段1

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

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

Stage 2 (Stage 2 and above are enabled by default)

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

• es7.exponentiationOperator

• es7.exponentialOperator