Transpile Async Await proposal with Babel.js?

Question

There is a proposal for introducing C# style async-await. I know Babel.js transpiles ES6 to ES5, but is there any way to make it transpile async-await to ES5?

Felix Kling · Accepted Answer · 2017-06-09T16:32:48.087

Babel v6

As of Babel v6, Babel doesn't contain any transformers itself anymore. You have to explicitly specify any feature you want to transform.

Presets - non ES2015 environment

The quickest way to get this working is to use presets which already contain the set of plugins needed to transform ES2015 and newer proposals. For async, you will need the es2015 and es2017 presets and the runtime plugin (don't forget to install babel-runtime as described in the documentation):

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

Presets - ES2015 environment

If you run the code in an environment that supports ES2015 (more specifically, generators and Promises), then all you need is the es2017 preset:

{
  "presets": [
    "es2017"
  ]
}

Custom

To only transform the async functions, you will need the following plugins.

syntax-async-functions is needed in any every case to be able to parse async functions

In order to run the async function, you either need to use

transform-async-to-generator: Converts the async function into a generator. This will use Babel's own "co-routine" implementation.
transform-async-to-module-method: Also converts the async function to a generator, but passes it to the module and method specified in the configuration instead of Babel's own method. This allows you to use external libraries such as bluebird.

If your code runs in an environment that supports generators, then there is nothing left to do. However, if the target environment does not support generators, you will also have to transform the generator. This is done via the transform-regenerator transform. This transform depends on runtime functions, so you will also need Babel's transform-runtime transform (+ the babel-runtime package).

Examples:

Async to generator

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

Async to module method

{
  "plugins": [
    "syntax-async-functions",
   ["transform-async-to-module-method", {
     "module": "bluebird",
     "method": "coroutine"
   }]
  ]
}

Async to generator + regenerator

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

Babel v4 and older

Yes, you have to enable the experimental transformers. Babel uses regenerator.

Usage

$ babel --experimental

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

As the link suggests, you now have to set by stage or transformer: babel.transform("code", { optional: ["es7.asyncFunctions"] }); — Daniel Billingham, Jun 07 '15 at 10:07
@Bergi: actually, it's different again with v6. Will update my answer later. — Felix Kling, Dec 06 '15 at 16:23
It took a long time to find this as the answer to "regeneratorRuntime is not defined". I wanted to avoid having to directly import/require any modules in my application, which most other answers were suggesting. Adding the "transform-runtime" plugin fixed the issue for me. Thanks! — Nick Spacek, Feb 05 '16 at 13:32
I'm trying the Async to module method (bluebird), but UglifyJS is choking on `function*`. How do we get rid of those? Is it even possible using this method? — mpen, Mar 02 '16 at 00:30
@felix transform-async-to-generator is not necessary. transform-generator already handles it. http://babeljs.io/docs/plugins/transform-regenerator/ — Tony, Jul 10 '16 at 23:32
After converting using "Async to generator + regenerator" I had an error "Unexpected token import". How to fix it? — dantey89, Jan 16 '17 at 11:12
@dantey89: ES6 `import` and `export` statements are not supported in any environment. You also have to configure Babel to convert that to CommonJS or whatever module system you are targeting. — Felix Kling, Jan 16 '17 at 18:56

score 6 · Answer 2 · answered Aug 30 '15 at 17:17

This solution may have changed since (Feb 25 Felix Kling) or perhaps there is still more than one way to use async await.

What worked for us was to run Babel like so

$ npm install babel-runtime

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

score 4 · Answer 3 · answered Dec 08 '15 at 12:51

I got this working as-of today by doing an additional npm install babel-preset-stage-0 and using it like

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

See

score 3 · Answer 4 · answered Oct 28 '15 at 01:57

Perhaps even more up-to-date now; just put the babel stuff in a separate file:

'use strict';

require('babel/register'); // Imports babel - auto transpiles the other stuff
require('./app'); // this is es6 - gets transpiled

See my code at how-can-i-use-es2016-es7-async-await-in-my-acceptance-tests-for-a-koa-js-app for some more details.

score 2 · Answer 5 · answered Dec 06 '15 at 14:15

2

The approved answer seems to be outdated now. The experimental flag has been deprecated in favor of stage.

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

Usage

$ babel --stage 0

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

Stage 0

es7.classProperties
es7.comprehensions

Stage 1

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

Stage 2 (Stage 2 and above are enabled by default)

es7.exponentiationOperator

answered Dec 06 '15 at 14:15

Matt Dell

9,205
11
41
58

1

If I use `babel.transform(code, { stage: 0 }).code`, then I receive an `ReferenceError: [BABEL] unknown: Unknown option: base.stage` How do the options need to be set? – Tobi Dec 08 '15 at 12:30
Hmm. Seemed to work for me when I set the above but looking at your answer it may have changed again. – Matt Dell Dec 09 '15 at 14:15