Why do we need babel?

Posted On: 07 May, 2020
Posted By: Harsh

Babel is a javascript Compiler used to convert ECMAScript 2015+ code to previous versions of javascript for older browser environments. In simpler terms it helps us to run our code and increase browser compatibility. Things that help babel to perform this conversions are by

Polyfill features that are missing in your target environment
Source code transformations
Transform Syntax

Process to set this up Babel

Installing Babel using npm

Running commands to install the packages:

npm install --save-dev @babel/core @babel/cli @babel/preset-env

npm install --save @babel/polyfill

npm install --save-dev @babel/preset-react

Babel configuration

Creating a config file named .babelrc

Plugins

plugins are small JavaScript programs that instruct Babel on how to carry out transformations to the code. You can write your own plugins and apply any transformations you want to your code.

For example we can use plugin-transform-arrow-functions to convert the arrow function into ES5 compatible functions.

const Tn = () => 1;

// converted to

var Tn = function Tn() {

return 1;

};

Presets

Presets are array of babel plugins or sharable options config, we don’t know what plugins need to be imported for our code transformations. We can always have the presets to do the work for us.

There are some official presets provided by babel.

@babel/preset-env
@babel/preset-flow
@babel/preset-react
@babel/preset-typescript

You also create your own presets as we know that are just array of babel plugins

module.exports = () => ({

 presets: [

    require("@babel/preset-env"),

  ],

 plugins: [

[require("@babel/plugin-proposal-class-properties"), { loose: true }],

    require("@babel/plugin-proposal-object-rest-spread"), 

  ],

});

Presets can contain other presets, and plugins with options.

Applying the custom preset into the config

{

  "presets": ["./myProject/myPreset"]

}

@babel/Polyfill

Babel Polyfill adds unavailable features for web browsers. Babel compiles the ECMA code that is needed for the current environment, it changes the syntax as per the config presets, but cannot do anything for objects and methods used, so we have to use polyfill to overcome the backward compatibility.

Here is the list of things that need polyfill support when used in older browsers

Promises
Map
Set
Symbol
Weakmap
Weakset
Array.from, Array.includes, Array.of, Array#find, Array.buffer, Array#findIndex
Object.assign, Object.entries, Object.values

Working with babel and webpack

When using webpack we need to add the babel-loader, the config options can be different but the structure will look something like this.

The polyfill will be imported at the entry,

So it will be first the polyfill load and then the entry file of the application.

Some issues faced in react JS while running it on older browsers

SCRIPT 1002 : syntax error

This is issue mostly occur in Ie11, there are fellow steps to resolve the issue

Install react-app-polyfill and import

import 'react-app-polyfill/ie11';

import 'react-app-polyfill/stable';

In your src/index.js

Install event-source-polyfill and add it in the webpack

Add it to webpack plugins

And also in the entry of the config

SCRIPT 1006 : Expected ')'

This error comes when there is a default arguments used in the code,
in my case i resloved is by tracing the error lines in the stacktrace and found that there was a package that i had import which use ES6 and babel is not able to transform the code.
SCRIPT 1028 : Expected identifier, string or number

in my case i resloved is by tracing the error lines in the stacktrace and found that there was a package that i had import which use ES6 and babel is not able to transform the code.

In both of this case the issue was in an imported package

from this "require("csv-parse")"

changed to  "require("csv-parse/lib/es5)"

import csv from "csv-parse" 

import csv from "csv-parse/lb/es5

Conclusion

If we want to have web browser compatibility until ie11 die out we have to use the code transformers like babel to give us support and run our code into older versions of web browsers