Getting Started With Babel - Transpiling Javascript

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

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.

1. Syntax analysis :
   It gets the list of tokens generated during the Lexical analysis and builds the abstract syntax tree.

2. 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

2. babel.config.* files, with the following extensions: .json, .js, .cjs, .mj

3. File-relative configuration

4. .babelrc.* files, with the following extensions: .json, .js, .cjs, .mjs.

5. .babelrc file, with no extension.

6. 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 ✌️
• Babel User Handbook Written by Jamie Kyle : Link here ✌️

Thank you for reading

Feel free to subscribe to my email newsletter and Connect with me