Transpiling in JavaScript

Transpiling is a term used for taking source code written in one language and converting or transforming it into another language.

All the browsers does not support JavaScript code written in ES6. It is a big challenge for every new gen developers. Now converting this ES6 code to ES5 is called Transpiling so it can be read by all the browsers.

Few in demand transpiling tools are: Babel, Webpack, and Traceur. Here we will talk about Babel, a tool which I like and uses the most.

What is Babel?

Babel is a tool mainly used to convert any ES5+ code into a backward compatible JavaScript code in current and older browser or environment. Babel offers better readability and understandability of the code it generate, after transpiling and makes developer’s life easy.

What can Babel do?

• • Transform syntax
  • Polyfill features that are missing in your target environment
  • Source code transformations

Let’s have a look at before and after version of using Babel.

Before:

let addition = (...numbers)=>{
	var sum = 0;
  	
  	for(var i=0; i<numbers.length;i++){
    	sum+=numbers[i];
  	}
}

In above code we have used spread syntax which is not supported in older browser. Now to convert this code we can use babel.

After:

"use strict";

var addition = function addition() {
  var sum = 0;

  for (var i = 0; i < arguments.length; i++) {
    sum += i < 0 || arguments.length <= i ? undefined : arguments[i];
  }
};

After comparing above code now you will able identify when to use this tool. Here I will not cover detail about Babel as we were trying to explain Transpiling only. I will suggest few below links to setup and  read more about Babel.

• Setup
• Playground to try Babel
• Official Docs

Yatendrasinh Joddha

I have healthy knowledge and experience in Azure, O365 and ASP.Net with c#, MVC, WebApi along with client-side frameworks and libraries like JavaScript, JQuery, KnockoutJs, AngularJs, Angular, ReactJs, NodeJs