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

Posted 2023-02-22

【中文标题】使用 Babel.js 转译 Async Await 提案？

【英文标题】：Transpile Async Await proposal with Babel.js?

【发布时间】：2015-04-26 20:29:40

【问题描述】：

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

【参考方案1】：

通天塔 v6

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

预设 - 非 ES2015 环境

完成这项工作的最快方法是使用 presets，其中已经包含转换 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 及更早版本

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

用法

$ babel --experimental

---

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

【讨论】：

正如链接所示，您现在必须按阶段或转换器设置： babel.transform("code", optional: ["es7.asyncFunctions"] );

您与实验变压器的链接已损坏。

你能在下面确认@MattDell 的回答吗？

@Bergi：实际上，v6 又有所不同。稍后会更新我的答案。

@Bergi 看看下面我的回答。

【参考方案2】：

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

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

见

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

【参考方案3】：

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

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

第一阶段

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

Stage 2（Stage 2 及以上默认启用）

es7.exponentiationOperator

【讨论】：

如果我使用babel.transform(code, stage: 0 ).code，那么我会收到ReferenceError: [BABEL] unknown: Unknown option: base.stage 选项需要如何设置？

嗯。当我设置上述内容时似乎对我有用，但看看你的答案它可能再次改变了。

【参考方案4】：

也许现在更先进了；只需将 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。

【参考方案5】：

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

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

$ npm install babel-runtime

---

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