USING ES7 ASYNC/AWAIT TODAY WITH BABEL

http://masnun.com/2015/11/11/using-es7-asyncawait-today-with-babel.html

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:

Shell

1	npm install - g babel - cli

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

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

{    "name" : "awesome-async" ,    "version" : "1.0.0" ,    "description" : "" ,    "main" : "github.js" ,    "scripts" : {      "test" : "echo \"Error: no test specified\" && exit 1"    } ,    "author" : "" ,    "license" : "ISC" ,    "dependencies" : {      "babel-plugin-syntax-async-functions" : "^6.1.4" ,      "babel-plugin-transform-regenerator" : "^6.1.4" ,      "babel-polyfill" : "^6.1.4" ,      "babel-preset-es2015" : "^6.1.4" ,      "request" : "^2.65.0"    } }

Configuring Babel

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

JavaScript

1 2 3 4

{    "presets" : [ "es2015" ] ,    "plugins" : [ "syntax-async-functions" , "transform-regenerator" ] }

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:

Shell

1 2	babel github .es6 - o github .js node github .js

You might run into a problem like this:

1 2 3 4 5 6 7 8 9 10 11 12 13

/ Users / masnun / Projects / awesome - async / github . js : 34    return regeneratorRuntime . async ( function printPublicGists $ ( _context ) {          ^ ReferenceError : regeneratorRuntime is not defined      at printPublicGists ( / Users / masnun / Projects / node / github . js : 34 : 10 )      at Object . < anonymous > ( / Users / masnun / Projects / node / github . js : 63 : 1 )      at Module . _compile ( module . js : 460 : 26 )      at Object . Module . _extensions . . js ( module . js : 478 : 10 )      at Module . load ( module . js : 355 : 32 )      at Function . Module . _load ( module . js : 310 : 12 )      at Function . Module . runMain ( module . js : 501 : 10 )      at startup ( node . js : 129 : 16 )      at node . js : 814 : 3

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

JavaScript

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43

require ( "babel-polyfill" ) ;   import request from "request" ;   // promise returning function function get ( url ) {    return new Promise ( function ( resolve , reject ) {      request ( {        method : 'GET' ,        url : url ,        json : true ,        headers : {          'User-Agent' : 'request'        }      } , function ( err , resp , body ) {        if ( err ) {          reject ( err ) ;        } else {          resolve ( body ) ;        }      } ) ;    } ) ; }     // create a new "async" function so we can use the "await" keyword async function printPublicGists ( ) {    // "await" resolution or rejection of the promise    // use try/catch for error handling    try {      var gists = await get ( 'https://api.github.com/gists/public' ) ;           // now you can write this like syncronous code!      gists . forEach ( function ( gist ) {        console . log ( gist . description ) ;      } ) ;    } catch ( e ) {      // promise was rejected and we can handle errors with try/catch!    } }     printPublicGists ( ) ;

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