Creating your babel transpiler

Babel helps to convert ES2015 and Jsx to javascript. So it is a javascript to javascript - parser and code generator.

In this tutorial i will show you a very simple tutorial working with babel main components namely :

a) babylon - a parse which takes javascript code and convert into AST.

b) babel-traverse - allow us to traverse through AST

c) babel-generator - code generator

Our goal is to convert this code

let  a = 2 + 2


let total = 2 + 2

Simple enough, so lets get started.

1. First we need to create a new folder.

2. Issue npm init and provide relevant information here

3. npm install --save babylon
    npm install --save babel-generator

4. Create a file called index.js and it should contain the following codes :-

Type node index.js to run this example

You will see the output :

{ map: null, code: 'let total = 2 + 2;' }

Noticed that we have converted "a" to total.

To really understand how things tied together please read babel handbook.

Entire code can be download here.


Popular posts from this blog

ionic2 cordova build android - Unable resolve gradle 2.2.3

OpenCover code coverage for .Net Core

A quick tutorial for OWASP ZAP tool for beginners