Before talking about Babel, let’s discuss some background topics first.
Transpilers.
Transpiler is known as source-to-source compilers.
Transpilers take in a source code file , then convert it to another source code file in some other programming language or a different version of the same language.
Transpilers vs Compilers.
Compilers convert the source code written in a high level language to machine executable instructions. (.exe, .out) whereas a transpiler produces another developer artifact.
What is ECMAScript (ES)
ECMA means European Computer Manufacturer’s Association.
ECMAScript is a Standard for scripting languages.
Languages like Javascript are based on the ECMAScript standard.
ECMA script specifies the core features that a scripting language should provide and how those features should be implemented.
What is ES 5?
ES evolution example upto 2016
ES5 is an abbreviation of ECMAScript 5 and also known as ECMAScript 2009. The sixth edition of the ECMAScript
At the time of writing this post, the last ES version is ES12 (2021). There are lots of great features of these ES versions, but most web browsers don’t support these features.
As an example, ES 7 feature will not run in some incompatible browser. To run the application, ES 7 source code must be converted to a supported JavaScript version. As I have mentioned, ES5 is supported in almost all web browsers.
Using Transpilers,we can convert ES6 JavaScript to ES5 JavaScript.
What is Babel?
We talked about a few basic concepts before. Now we can directly talk about Babel.
Babel is a JavaScript transpiler. Babel helps to solve the issue that we have. What?
You can write modern JavaScript (latest ES features), and Babel converts into ES5 JavaScript. That can run in any browser without many issues. More web browsers can understand (run) these new features because of Babel transpiler.
Example.
You may already know arrow function which is introduced in ES6.
This is what Babel gives after converting.
React and Babel.
If you are working with React , you may know JSX. Browsers can’t understand JSX. So Babel transpile JSX code into plain JavaScript.
Read more.
Hope you get a basic idea of Babel. You can read more about usages and all from the official website. babel.io