使用Babel.js的Transpile Async Await提案

Transpile Async Await proposal with Babel.js?

本文关键字：Async Await 提案 Transpile Babel js 使用      更新时间：2024-04-24

有一个引入C#风格async-await的建议。我知道Babel.js可以将ES6转换为ES5，但有什么方法可以将其转换为异步等待ES5吗？

巴别塔v6

从巴别塔v6开始，巴别塔本身不再包含任何变形金刚。您必须明确指定要变换的任何特征。

预设-非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转换（+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及更高版本

是的，你必须启用实验变压器。巴别塔使用再生器。

用法

$ babel --experimental

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

这个解决方案可能自（Feb 25 Felix Kling）以来发生了变化，或者可能仍然有多种方法可以使用异步等待。

对我们有效的是像一样运行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"] });

参见

  • http://babeljs.io/docs/usage/options/#options
  • http://babeljs.io/docs/plugins/preset-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-es22016-es7-async-await-in-my-acceptance-tests-for-a-koa-js-app上的代码。

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

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

用法

$ babel --stage 0

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

第0阶段

  • es7.classProperties
  • es7.理解

第1阶段

  • es7.async函数
  • es7.装饰师
  • es7.exportExtensions
  • es7.对象RestSpread

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

  • es7.指数运算符
相关文章：