Hey folks! Welcome to a new tutorial series on Babel.js. This tutorial series is meant for software programmers who want to learn the basics of BabelJS and its programming concept in easy ways. This tutorial is going to give you adequate understanding on the various functionalities of BabelJs.
What is BabelJS?
Babel.js is a JavaScript transpiler used for transpiling new features into old standards. Using this, the features can be run on both old and new browsers, hassle-free. BabelJS was developed by an Australian developers called Sebastian McKenzie.
Why BabelJS?
JavaScript is the language that the browser understands. We use different browsers to run our applications such as Firefox, Opera, Chrome, Internet Explorer, Safari, Microsoft Edge, UC browser, iCab, etc. ECMA Script is the JavaScript language specifications; the ECMA Script 2015 ES6 is the stable version which functions fine in all new and old web browsers.
After ES5, we've had ES6, ES7, and ES8. ES6 released with a lot of features which are not completely supported by all web browsers. Same applies to ES7, ES8 and ESNext (next version of ECMA Script). It is now uncertain when it'll be possible for all browsers to be compatible with all the ES versions that released.
Incase we intend making use of ES6 or ES7 or ES8 features to write our code it will tend to break in some old browsers because of lack of support of the new changes. Hence, if we want to utilize new features of ECMA Script in our code and want to run it on all possible browsers available, we need a tool that will compile our final code in ES5.
Babel does same and it's called a transpiler that transpiles the code in the ECMA Script version that we want. It has features such as presets and plugins, which configures the ECMA version we need to transpile our code. With Babel, developers can write their codes using the new features in JavaScript. The users can get the codes transpiled via Babel; the codes can later be used in any browsers without any problems.
Following below table list down the features available in ES6, ES7 and ES8 -
After ES5, we've had ES6, ES7, and ES8. ES6 released with a lot of features which are not completely supported by all web browsers. Same applies to ES7, ES8 and ESNext (next version of ECMA Script). It is now uncertain when it'll be possible for all browsers to be compatible with all the ES versions that released.
Incase we intend making use of ES6 or ES7 or ES8 features to write our code it will tend to break in some old browsers because of lack of support of the new changes. Hence, if we want to utilize new features of ECMA Script in our code and want to run it on all possible browsers available, we need a tool that will compile our final code in ES5.
Babel does same and it's called a transpiler that transpiles the code in the ECMA Script version that we want. It has features such as presets and plugins, which configures the ECMA version we need to transpile our code. With Babel, developers can write their codes using the new features in JavaScript. The users can get the codes transpiled via Babel; the codes can later be used in any browsers without any problems.
Following below table list down the features available in ES6, ES7 and ES8 -
| Features | ECMA Script version |
|---|---|
| Let + Const | ES6 |
| Arrow Functions | ES6 |
| Classes | ES6 |
| Promises | ES6 |
| Generators | ES6 |
| Iterators | ES6 |
| Modules | ES6 |
| Destructuring | ES6 |
| Template Literals | ES6 |
| Enhanced Object | ES6 |
| Default, Rest & Spread Properties | ES6 |
| Async - Await | ES7 |
| Exponentiation Operator | ES7 |
| Array.prototype.includes() | ES7 |
| String Padding | ES8 |
Babel manages the following two parts -
- transpiling
- polyfilling
What is Babel-Transpiler?
The babel-transpiler converts the syntax of modern JavaScript into a form, which can be understood easily by old web browsers. For example, arrow function, const, let classes is going to be converted to function, var, etc. Here the syntax, that is the arrow function is converted to a normal function keeping the functionality the same in both the cases.
What is Babel-polyfill?
There are new features added in JavaScript such as promises, maps and includes. These features can be used on an array; the same, when used and transpiled via babel will not get converted. In the event the new feature is a method or object, we need to use Babel-polyfill along with transpiling to make it work on older browsers.
Following is the list of ECMA Script features that are obtainable in JavaScript, which can be transpiled and polyfilled -
Following is the list of ECMA Script features that are obtainable in JavaScript, which can be transpiled and polyfilled -
- Classes
- Modules
- Spread
- Const
- Destructing
- Decorators
- Default parameters
- Arrow functions
- Template Literals
- Rest parameters
- Async functions
- Computed property names
- Object rest/spread
ECMA Script features that can be polyfilled -
- Promises
- Symbol
- Set
- Map
- Weakset
- Weakmap
- Includes
- Array.from
- Array.of
- Array#find
- Array#buffer
- Array#findIndex
- Object.assign
- Object.entries
- Object.values
Features of BabelJS
In this section, we'll learn about the various features of BabelJS. Following are the most important core features of BabelJS -
Babel-Plugins
Plugins and Presets are config details for Babel to transpile the code. Babel supports a number of plugins, which can be made use of individually, if we know the environment in which the code will execute.
Babel-Presets
Babel presets are config details to the babel-transpiler that instructs Babel to transpile in a specific mode. We need to utilize presets, which has the environment in which we want the code to be converted. For example, the es2015 preset will convert the code to es5.
Babel-Polyfills
There are some features like methods and objects, which cannot be transpiled. At such instances, we use Babel-polyfill to facilitate the use of features in any web browser. Let us look at the example of promises; for the feature to work in older browsers, we need to use polyfills.
Babel-CLI
Babel-cli comes with a bunch of commands where the codes can be easily compiled on the command line. It also has features such as plugins and presets to be used along with the command making it easy to transpile the code at one go.
Advantages of BabelJS
In this section, we'll learn about the various advantages of using BabelJS -
- BabelJS gives backward compatibility to all the newly added features to JavaScript and can be used in any web browser.
- BabelJS has the ability to transpile to take the next upcoming version of JavaScript - ES6, ES7, ESNext, etc.
- BabelJS can be used along with webpack, gulp, flow, react, typescript, etc. making it very powerful and can be utilized with big projects making developer's life easy.
- BabelJS also works with react JSX syntax and can be compiled in JSX form.
- BabelJS has support for plugins, polyfills, babel-cli that makes it easy to work with big projects.
Disadvantages of BabelJS
In this section, we'll learn about the various disadvantages of BabelJS -
- BabelJS code changes the syntax while transpiling which makes the code hard to understand when released on production.
- The code transpiled is more in size when compared to the original code.
- Not all ES6, ES7, ES8, or the upcoming new features can be transpiled and we have to utilize polyfill so that it works on older web browsers.
Following is the official website of babeljs https://babeljs.io/.
Alright guys! This is where we are going to be rounding up for this tutorial. In our next tutorial guide, we will be discussing about BabelJS Environment Setup
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
Feel free to ask your questions where necessary and we will attend to them as soon as possible. If this tutorial was helpful to you, you can use the share button to share this tutorial.
Follow us on our various social media platforms to stay updated with our latest tutorials. You can also subscribe to our newsletter in order to get our tutorials delivered directly to your emails.
Thanks for reading and bye for now.
