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.

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

BabelJS Compiler

For Norma Script ( Without ESM Module System).

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

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.
  <script type="text/babel" data-type="module">
  // JS Module Codes


No comments:

No Comments