Using ES7 async/await today with Babel

posted inJavascript, NodeJS on by

Let’s take a code snippet that contains the demonstration of async/await — https://gist.github.com/patrickarlt/8c56a789e5f185eb9722 – our objective is to transpile this piece of code to ES5 (current day Javascript) so we can run it with today’s version of NodeJS.

You will notice a command on top of the snippet which no longer works because Babel JS has changed. I am going to describe how we can do it with the latest version of babel as of this writing (6.1.4 (babel-core 6.1.4)).

Install Babel and Plugins

The new Babel depends on individual plugins to transform and parse codes. To transform async functions, we shall use the transform-regenerator plugin. We also need to add the syntax plugin to recognize the async/await syntax. Otherwise Babel won’t recognize those. Apart from that, we also install the ES2015 preset which includes a sane set of plugins for transforming ES6 to ES5. We will keep those so we can use other ES6 goodies.

First we install babel-cli globally:

Here’s our package.json file so you can just do npm install:

Configuring Babel

Here’s the .babelrc file I put in the same directory:

The file tells babel how to transform your code.

Transpile & Run

Once we have installed the dependencies, we can then start transpiling the codes to JS:

You might run into a problem like this:

It’s because we need to include the regenerator run time. The runtime is packed in the babel-polyfill we have already installed. We just need to include it in our source code. So the final github.es6 file would look like this:

Now if we transpile and run again, it should work fine.


12 Comments → Using ES7 async/await today with Babel

  3. Pingback: acjohnson55 comments on "Pogoscript – a compile-to-JS language that emphasises concurrency, readability"

  4. Austin

    Yes, im curious the difference between the runtime-regenerator and the transform-async-to-generator.  I’m dealing with lots of debugging issues, see this: https://github.com/amcdnl/debug-hell

    Reply ↓
  5. Taylor Hurt

    transform-async-to-generator plugin appears to transpile syntax of async/await into syntax of */yield. It also appears to make the behavior of those generator functions *act* like the intended async functions with a small code addition. **This is ES7 to ES6**

    regenerator was created by Facebook team (See: https://facebook.github.io/regenerator/)– it transpiles generator functions into ES5-compliant syntax. In order to run those ES5 functions, however, requires the regeneratorRuntime code to be included with your code. If you use es2015 preset in Babel, it looks like it wraps each generator function with a hook into regeneratorRuntime–so the Babel es2015 preset is expecting you will include the regeneratorRuntime with your code. **regenerator is ES6 to ES5**

    If you’re not sure what a plugin/preset is doing, just try each one at a time in .babelrc settings and try transpiling a simple example!

    Reply ↓
    1. Dan Dascalescu

      DavidC is correct. You don’t need any polyfill, or even the es2015-preset.

      All you need to do is:

      1. Edit package.json and add a section for babel (this works the same as .babelrc, but is one less file):

      "babel": {
      "plugins": [
      "transform-async-to-generator"
      ]
      }

      2. Install the plugin:

      npm install babel-plugin-transform-async-to-generator --save-dev

      3. Run babel-node:

      node_modules/babel-cli/bin/babel-node.js

      Reply ↓

  7. Pingback: ES6 チートシート | プログラミング | POSTD

  8. Pingback: 【转】ES6 手册 - 屌丝程序员

  9. William Lin

    How can I get

    to work in browser?

    I still get error: “ReferenceError: regeneratorRuntime is not defined” and “require is not defined”.

    Reply ↓

Leave a Reply

Your email address will not be published. Required fields are marked *