So, What exactly is Babel?

The Cause Confusion

While Beginning to code I had a lot of confusion what exactly is the different between Node and Babel, as according to me they both were javascript compilers which can run locally.

Just a few days ago I was pondering with relatively different ways of importing the same module in JS while browsing over the internet. As before it I had made projects in NodeJS(The Javascript is usually written like ES5 Syntax) and ReactJS(the syntax is kept like ES6). The importing two methods being

const firebase = require('firebase');

and the other being

import firebase from 'firebase';

The confusion even further increases, when trying to compile the later with Node(which gives an error on terminal) but the the first one compiles successfully.

So what is the difference in these two importing methods?

The difference is that the first one is ES5 syntax for javascript and has been there for a while and is supported with most browsers(Try the second by linking it to an Index.html file,The console of the browser will give an error, example given further in the blog). The later one is ES6 Syntax for Javascript(2015-2017) which is recent when trying to compile the later with Node, which gives an error on terminal(There are NPM modules required like babel/core, but the the first one compiles successfully.

Babel to the Rescue

Most of the Web-Browsers has a support of ES5 instead of ES6(Which is supported on all modern web-browsers like Chrome, Opera, Safari, Mozilla etc) but there are still some old versions of these web browsers out there. So to make the developed app compatible with most of the web-browsers out there(including Internet Explorer😉) Babel is used to convert the ES6 Javascript to Backwards Compatible ES5. So, That it can be ran by most of the web-browsers

One more thing to note is that in Index.html you cannot run javascript that has modules as dependency (there is web-pack for that)

Web-Pack - Converts your dependancy driven code to static public assets like HTML, JS and CSS so that it can be easily rendered by web-browsers(old and new) More on it in the Next Blog😁

Example for testing the need of Web-Pack

If you want to test out what I am trying to say, Make an Index.html file with contents and add a script.js file in the same directory

<!-- Index.html -->

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    Test Html
  </body>

  <script type="module" src="script.js"></script>
</html>

Install any NPM module, firebase for example, and import it.

//  script.js

const firebase = require('firebase');

The Browser's console won't recognise this require statement and will give error(Web-Pack is the Solution for this😋)

Uncaught ReferenceError: require is not defined
    at script.js
(anonymous) @ firebase.js:14

Thanks For Reading So far until the end. See you in the next blog👋.
Link to my Socials Linktree

Bhavuk Kalra's Blog