After ES5, we have had ES6, ES7, and ES8. ES6 released with a lot of new features which are not fully supported by all browsers. The same applies to ES7, ES8 and ESNext (next version of ECMA Script). It is now uncertain when it will be possible for all browsers to be compatible with all the ES versions that released.
Incase we plan to use 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. Therefore, if we want to use 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.
The following table lists down the features available in ES6, ES7 and ES8 −
|Features||ECMA Script version|
|Let + Const||ES6|
|Default, Rest & Spread Properties||ES6|
|Async – Await||ES7|
BabelJS manages the following two parts −
What is Babel-Transpiler?
What is Babel-polyfill?
- Default parameters
- Computed property names
- Object rest/spread
- Async functions
- Arrow functions
- Rest parameters
- Template Literals
ECMA Script features that can be polyfilled −
- Array.from, Array.of,Array#find,Array.buffer, Array#findIndex
Features of BabelJS
In this section, we will learn about the different features of BabelJS. Following are the most important core features of BabelJS −
Plugins and Presets are config details for Babel to transpile the code. Babel supports a number of plugins, which can be used individually, if we know the environment in which the code will execute.
Babel presets are a set of plugins, i.e., config details to the babel-transpiler that instruct Babel to transpile in a specific mode. We need to use presets, which has the environment in which we want the code to be converted. For example, es2015 preset will convert the code to es5.
There are some features like methods and objects, which cannot be transpiled. At such instances, we can make use of babel-polyfill to facilitate the use of features in any browser. Let us consider the example of promises; for the feature to work in older browsers, we need to use polyfills.
Babel-cli comes with a bunch of commands where the code can be easily compiled on the command line. It also has features like plugins and presets to be used along with the command making it easy to transpile the code at one go.
Advantages of using BabelJS
In this section, we will learn about the different advantages associated with the use of BabelJS −
BabelJS can be used along with gulp, webpack, flow, react, typescript, etc. making it very powerful and can be used with big project making developer’s life easy.
BabelJS also works along 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 using BabelJS
In this section, we will learn about the different disadvantages of using BabelJS −
BabelJS code changes the syntax while transpiling which makes the code difficult to understand when released on production.
The code transpiled is more in size when compared to the original code.
Not all ES6/7/8 or the upcoming new features can be transpiled and we have to use polyfill so that it works on older browsers.
Here is the official site of babeljs https://babeljs.io/.