What is Babel?

Hello guys, Today I’m going to talk about “Babel” which is one of the hottest topics in the front-end-dev playground. Babel is a JavaScript transpiler that converts edge JavaScript(ES6) into plain old ES5 JavaScript that can run in any browser even in the old ones.

What is a transpiler?

Transpilers, or source-to-source compilers, are tools that read source code written in one programming language, and produce the equivalent code in another language which is in the same level.

What is transpiling then?

It is a process of taking one language & convert it in to another like you transpile your typescript into javascript and sass into css.

What is the difference between compiling & transpiling?

Compiling convert one language to another at lower abstraction level like java to byte code while transpiling convert one language to another at same abstraction level like typescript to javascript or sass to css.

What is the reason for using babel?

Well, all the latest javascript features are not supported in every browser yet. So someone needs to do the converting part right? So babel is here to transpile latest javascript features(ES6 features) which are not understandable to every browser to ES5 which is understandable to every browser.

Getting Started

Babel comes packaged as an node module. Installation can be done via npm.

Steps:

01. first we have to install the babel-cli vianpm install –g babel-cli

02. make a project directory where you want to test babel in action. I have mine which named as “babel-example”

03. Change the directory to “Babel-example”

04. Setup the package.json by executing npm init -y

initial package.json

05. Add babel into your package.json by executingnpm install –-save-dev babel-cli babel-preset-es2015

package.json after babel is installed

Note: –-save-dev means we are installing these dependencies for development purpose only and we don’t want it in production. Babel-preset-es2015 is an array of plugins which allow babel to transpile ES2015 code. It includes lot of plugins like plugin for arrow function, classes & many more!!!

06. Create the .babelrc file in your root directory.

Note: This file tells the babel how we want our code to transpile. It contains a normal json. Two important properties are plugins & presets. If you just want babel to transpile specific features you can specify them with plugins property because there are separate plugins like arrow function, classes, instanceof etc & many more. But defining plugins this way is not a great idea because you want all the features of ES6 to be transpiled so instead of specifying all the plugins in plugins property babel has something called presets. There are many presets. One of them is ES2015. Presets are just a simple collection of babel plugins. That’s why we have installed babel-preset-es2015 in our example. That will allow babel to transpile all the features of ES2015.

.babelrc file

07. Open the .babelrc file and specify es2015 preset in our presets property there.

.babelrc file after specified es2015

08. Create a folder called src in our root directory and a test.js file inside it. This is the file where we are going to write our ES2015 features and we can see babel will transpile it, with the help of babel-preset-es2015. My test.js file looks like:

src/test.js

09. Now let’s tell the babel to convert our ES6 code into ES5 by executing babel src -d build

Note:src is where I have my src which has ES6 code and buildis where i want to see the ES5 code which is formally we call it the Output or Build.

10. After running above command in terminal you will see a build folder has generated with test.js file inside it which has written the same content using ES5. My test.js file looks like :

build/test.js

All done ;) now we have transpiled our ES6 code into ES5 using babel. Now we know how babel works. One important thing is there are plugins for webpack, gulp, grunt etc as well.

That’s all for now, Hope you enjoyed the reading. See you again with some another hot topic!!!!.