2 Apr 2021

BabelJS JavaScript Compiler & JSX( Javascript + XML)


In this post we will know about What is Babeljs & why the babeljs has been made? What is main work of Babeljs?

BabelJS is a javascript compiler which help to translate new version of javascript syntax like ES2020 to Older version of javascript syntax which will help to run javascript code in all modern & as well as older web browser.
What's Reactjs? Introduction to reactjs Front End UI library

Input - ES2020 (Nullish Coalescing)

In new javascript newer version of ES2020 has been introduced a new Js operator. that's Nullish Coalescing .

    
function greeting(input) {
  return input ?? "Hello world";
}
      

Output - To Backward JS Syntax
This is the output of above one given js code example By BabelJS. Babeljs compliles ES2015+ version of Javascript to lower version of JS. Which helps to achieve backward compatibility for most web browsers.

function greet(input) {
  return input != null ? input : "Hello world";
}

Import BabelJS CDN

Copy the BabelJS CDN script tag to webpage's head section.


<head>
<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
</head>

BabelJS Compiler

For Norma Script ( Without ESM Module System).


Add type Attribute to Script "text/babel". eg.
  <body>
  
  
  <script type="text/babel">
  // JS Codes
  </script>
  
  </body>
  

For ESM (Module)


To work with ES Module, add an extra custom Attribute data-type="module" to above one Normal Script tag. It's changed to Module module.
  <body>
  
  
  <script type="text/babel" data-type="module">
  // JS Module Codes
  </script>
  
  </body>
  


Reaction:

No comments:

No Comments

COMMENT FROM MESSAGE