====== Babel ======

===== Use cases =====

Babel was mainly used to transpile (compile) ES6 code into ES5 or older version of ES (ECMAScript). \\ 
Latest versions of Node.js (for example 16.15.1) already has good support for ES6, so babel may not be needed. \\ 

But, there are still situations where using Babel can be beneficial: 
  - **Latest JavaScript Features**: Babel lets you use the latest JavaScript features that may not be supported yet in your target environments. This includes features that are in the proposal stage and are not yet part of an official ECMAScript standard.
  - **Browser Compatibility**: If you're developing a web application that needs to support older browsers (like Internet Explorer), Babel is crucial. You can compile your JavaScript to ensure it works correctly on all browsers you need to support.
  - **React/JSX**: If you're using React or another library that uses JSX, Babel is necessary to compile JSX into regular JavaScript.
  - **Using TypeScript**: Babel can be used to compile TypeScript to JavaScript, if you're using TypeScript for static type-checking.
  - **Minification**: Babel can be used to minify your code, making the size of your JavaScript files smaller and thereby improving load times.
  - **Code Transformations**: Babel has plugins that allow for code transformations which can help you write cleaner or more efficient code. For instance, @babel/plugin-transform-runtime can help to avoid duplication in your compiled output.

===== Install babel packages for a project =====

This will create a **node-modules** folder containing a lot of modules:

<code>
npm install @babel/core @babel/preset-env @babel/node
</code>

Output:
<code>
added 248 packages, and audited 249 packages in 40s

58 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
</code>

==== Create .babelrc ====

Inside your project in the main directory create a file called **.babelrc**. \\
This will indicate babel which presets to use to transpile the ES6 code in ES5 code:

<code javascript .babelrc>
{
    "presets": ["@babel/preset-env"]
}
</code>

===== Run our transpiled code (from ES6 to ES5) =====

This command will transpile and run the code on the fly:

<code>
npx babel-node ./src/index.js
</code>

If the program has some arguments:

<code>
npx babel-node ./src/index.js 5 5
</code>

===== View transpiled code =====

If we want to examine the transpiled code, we'll need to install the babel command line:

<code>
npm install @babel/cli
</code>

Output:
<code>
added 29 packages, and audited 278 packages in 5s

61 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
</code>

Next, add a script entry in the package.json file:

<code javascript>
{
  "scripts": {
    "build": "babel src -d dist"
  }
}
</code>

Next, we can run:
<code>
npm run build
</code>

Transpiled code are now in the dist folder:
<code>

> build
> babel src -d dist

Successfully compiled 2 files with Babel (423ms).
</code>