IndianTechnoEra: Transcompiler Babel ES6 to ES5 | Indiantecheoera

 

What is Trans-compiler in JavaScript?

Trans-compiler is source to source compiler.

The most of the browser support ES6 but the browser don't support then in the earlier needed to wait to update the browser so that the browser could support the ES6 functionalities but the Babel make the biggest change

Babel is a type of tool that can be use in a web as a script it convert ES6 into older ECMA Script versions like ES5 and previously 

How does  Transcompiler Babel convert ES6 to ES5 or previous  version of ECMA Scrip

E.g. 1: ES6 code with Arrow function

const add = (x,y) =>{ return(x + y)}

console.log(add(1,3))

Transcompiler Babel convert above code as the following

var add = function(){

    var x=arguments.length<=0 || arguments[0]

    var y=arguments.length<=1 || arguments[1]

    return (x+y)

};

console.log(add(12,23))

E.g. 2: ES6 code with Arrow function with value assign  

const add = (x=45,y=59) =>{ return(x + y)}

console.log(add())

Transcompiler Babel convert above code as the following

var add = function(){

    var x=arguments.length<=0 || arguments[0]

    x = 45

    var y=arguments.length<=1 || arguments[1]

    y = 59

    return (x+y)

};

console.log(add())

You can transpile JavaScript directly in the browser using the inline Babel transpiler.

You just include the browser.js file, and any scripts with type="text/babel" will be

converted. Even though Babel 6 is the current version of Babel, only the CDN for

Babel 5 will work. 

<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.js"> </script> <script src="script.js" type="text/babel"></script>