Note: Following blog is written based on the documentation of the official babel docs here.

  • Babel is the javascript transpiler.

  • Transpiler is a type of translator that takes the source code of a program written in a programming language as its input and produces an equivalent source code in the same programming language.

  • Babel converts a newer version of JavaScript, such as ES9, to a standard older version (ES5).

  • Babel has support for the latest version of JavaScript through syntax transformers.

Why we require transpilation?

  • Cross-Browser Compatibility: Every browser has its own javascript engine and may interpret Javascript code differently, leading to inconsistencies and compatibility issues. Transpilers ensures same javascript code behaves consistently across browsers.

  • Utilize the latest functionalities in the language: JavaScript evolves with new features, hence transpilation enables developers to use modern syntax on older browsers, ensuring inclusive code accessibility.

  • Code Maintainability: Ensuring codebases align with evolving JavaScript standards is crucial. Transpilation streamlines this process, automatically converting modern code to older versions for enhanced maintainability and compatibility.

Example:

Javascript introduced Arrow Function in 2015. This was not compatiable in older browsers as their engine do not recognize this syntax.

let arr = ["a", 1, 3];
arr.forEach(item=>{
   console.log(item)
})

Babel will convert above code to following:

let arr = ["a", 1, 3];
arr.forEach(function(item){
   console.log(item)
})