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.


Comments

Popular posts from this blog

ionic2 cordova build android - Unable resolve gradle 2.2.3

OpenCover code coverage for .Net Core

Using Custom DLL with IronPython / Scripts