Why do we need babel?
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-reactBabel 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)" or
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
555
Leave a Reply
555
Leave a Reply
555
Leave a Reply
555
Leave a Reply