Getting Started With Babel - Transpiling Javascript
Tags: javascript, webdev, beginners, tutorial
Published: 2022-08-10 14:17:00

Babel is a generic multi-purpose compiler for JavaScript. Using Babel you can create the next generation of JavaScript, as well as the next generation of JavaScript tooling.

JavaScript as a language is constantly evolving, with new specs and proposals coming out with new features all the time. Using Babel will allow you to use many of these features years before they are available everywhere.

Babel does this by compiling down JavaScript code written with the latest standards into a version that will work everywhere today. This process is known as source-to-source compiling, also known as transpiring. [Source:  Jamie Kyle](https://github.com/jamiebuilds/babel-handbook/blob/master/translations/en/user-handbook.md)

### What is Babel?

Babel is a javascript compiler  which means javascript to javascript compiling, 
babel is divided into different steps :

-  Input source code
-  Transformed AST
-  Generating Original AST  
-  Output source code 

this is done by three different  packages 

- @babel/parser 
-  @babel/traverse
-  @babel/generator,  they are all inside babel-core which provides a simple API because using three different packages just to compile your program isn’t idle so we have roughed them in one package making it easy.

### Talking about babel-parser

Babel parser is divided into  different phases :

1. Lexical analysis :
Transform the input source code into a list of tokens
  
```
var age = 10;

/* var age = 7;

``` 
during this phase, it reports errors about invalid literal or invites chapters for example if we have a non-traumatic comment or string if there is a chapter that doesn’t make sense, it report’s the errors.

2. Syntax analysis :
It gets the list of tokens generated during the Lexical analysis and builds the abstract syntax tree.
    
3.  Semantic analysis :
It checks the AST respects all the static ECMAScript rules called early errors and also it reports errors about invalid variables, using a scope tracker.

### Features of Babel
Here are the main things Babel can do for you:
- Transform syntax
-  Polyfill features that are missing in your target environment (through a third-party polyfill such as core-js)
-  Source code transformations

### Presets
Babel presets can act as a sharable set of Babel plugins and/or config options.
We've assembled a few presets for common environments:
-  @babel/preset-env for compiling ES2015+ syntax
-  @babel/preset-typescript for TypeScript
-   @babel/preset-react for React
-   @babel/preset-flow for Flow

### Configuration files
Babel has two parallel config file formats, which can be used together, or independently.

1. Project-wide configuration
- babel.config.* files, with the following extensions: .json, .js, .cjs, .mj

2. File-relative configuration
- .babelrc.* files, with the following extensions: .json, .js, .cjs, .mjs.
- .babelrc file, with no extension.
-  package.json files, with a "babel" key.


### What's next?
Now you know the basics of how babel transpiling Javascript. You know what it is, and why it can be useful. But nothing will convince you more than some hands-on experience.  For more understanding, you can check out  :

- The  official babel website :  [Link here ✌️](https://babeljs.io/) 
- Babel User Handbook Written by Jamie Kyle  :  [Link here ✌️](https://github.com/jamiebuilds/babel-handbook) 


### Thank you for reading 

Feel free to subscribe to my email newsletter and [Connect with me](https://linktr.ee/davidigheose)