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

IT技术 javascript async-await babeljs ecmascript-next
2021-02-26 14:59:08

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

5个回答

通天塔 v6

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

预设 - 非 ES2015 环境

实现此功能的最快方法是使用预设,其中已经包含转换 ES2015 和更新提案所需的插件集。对于async,你将需要es2015es2017预置和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函数转换为生成器,但传递给配置中指定的module和方法,而不是 Babel 自己的方法。这允许您使用外部库,例如bluebird.

如果您的代码在支持生成器的环境中运行,则无需执行任何操作。然而,如果目标环境并不能支持发电机,你也将有改造发电机。这是通过transform-regenerator转换完成的这个转换依赖于运行时函数,所以你还需要 Babel 的transform-runtime转换(+babel-runtime包)。

例子:

异步生成器

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

异步到module方法

{
  "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 });
@Bergi 看看下面我的回答。
2021-05-06 14:59:08
@Bergi:实际上,v6 又有所不同。稍后会更新我的答案。
2021-05-09 14:59:08
你能在下面确认@MattDell 的回答吗?
2021-05-11 14:59:08
您与实验变压器的链接已断开。
2021-05-18 14:59:08
正如链接所暗示的,您现在必须按阶段或转换器进行设置: babel.transform("code", { optional: ["es7.asyncFunctions"] });
2021-05-20 14:59:08

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

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

$ npm install babel-runtime

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

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

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

也许现在更新了;只需将 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 中的我的代码

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

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

用法

$ babel --stage 0

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

阶段 0

  • es7.class 属性
  • es7.comprehensions

阶段1

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

第 2 阶段(默认启用第 2 阶段及以上)

  • es7.exponentialOperator
如果我使用babel.transform(code, { stage: 0 }).code,那么我会收到ReferenceError: [BABEL] unknown: Unknown option: base.stage如何设置选项?
2021-05-10 14:59:08
唔。当我设置上述内容时,似乎对我有用,但查看您的答案可能又发生了变化。
2021-05-21 14:59:08