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

to

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.