Transpile Async等待Babel.js的提案？

Question

有一個引入C＃style async-await的提議。 我知道Babel.js將ES6轉換為ES5，但是有沒有辦法讓它變得異步 - 等待ES5 ？

Answer 1

巴別塔v6

截至Babel v6，Babel不再包含任何變形金剛。 您必須明確指定要轉換的任何要素 。

預設 - 非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 }); 

Answer 2

自（2月25日Felix Kling）以來，這個解決方案可能已經發生了變化，或者可能還有不止一種方法可以使用異步等待。

對我們有用的是像這樣運行Babel

$ npm install babel-runtime

---

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

Answer 3

我今天通過做一個額外的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/

Answer 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 。

Answer 5

批准的答案現在似乎已經過時了。 實驗標志已被棄用，有利於階段。

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