Transpile Async等待Babel.js的提案?

时间:2015-02-25 00:23:14

标签: javascript async-await babeljs ecmascript-next

有一个引入C#style async-await的提议。我知道Babel.js将ES6转换为ES5,但有没有办法让它转换为async-await到ES5

5 个答案:

答案 0 :(得分:99)

Babel v6

至于Babel v6,Babel不再包含任何变形金刚。您必须明确{... 3}}想要转换。

预设 - 非ES2015环境

最快捷的方法是使用预设,它已经包含了转换ES2015和更新提案所需的插件集。对于async,您需要specify any featurees2015预设以及es2017插件(不要忘记安装babel-runtime,如文档中所述):

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

预设 - ES2015环境

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

{
  "presets": [
    "es2017"
  ]
}

定制

要仅转换async函数,您需要以下插件。

在任何情况下都需要

runtime才能解析异步函数

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

  • syntax-async-functions:将async函数转换为生成器。这将使用Babel自己的"共同常规"实施
  • transform-async-to-generator:还将async函数转换为生成器,但将其传递给配置中指定的模块和方法,而不是Babel自己的方法。这允许您使用外部库,例如bluebird

如果您的代码在支持生成器的环境中运行,那么就没有什么可做的了。但是,如果目标环境支持生成器,则还必须转换生成器。这是通过transform-async-to-module-method转换完成的。此转换取决于运行时函数,因此您还需要Babel的transform-regenerator转换(+ 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及更早版本

是的,您必须启用transform-runtime。 Babel使用experimental transformers

  

<强>用法

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

答案 1 :(得分:6)

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

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

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

答案 2 :(得分:4)

我今天通过执行额外的npm install babel-preset-stage-0并像

一样使用它来实现这一目标
var babel = require("babel-core");
var transpiled = babel.transform(code, { "presets": ["stage-0"] });

答案 3 :(得分:2)

现在可能更新了;把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的代码。

答案 4 :(得分:2)

批准的答案现在似乎已经过时了。实验标志已被弃用,有利于阶段。

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

第1阶段

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

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

  • es7.exponentiationOperator