Would you like to use ES6 Promises?
JavaScript is a progressive language and browsers improve their ability to understand the new features of JavaScript over time.
For some features you might want to wait for browser to support otherwise you should get Babel to transpile ES2015+ feature to ES5 for you, so all browsers will recognise them.
What Babel does is just transforming some ES6+ features to old ES5 features which means it is not going to change or add anything to the Objects. However, some syntax like Promise, Include ,.... could not be easily converted to ES5 so you need to polyfill them means adding the new functionality to the browsers to make them look like native browsers.
Some libraries like Axios uses the ES6 promise implementation out of the box so if your environment does not support Promises (For example IE or Android version x), you need to polyfill that features.
I tried to use babel-preset to only add the features when my browser need them but did not get the exact result I expected.
{
"presets": [
[
"env",
{
"targets": {
"browsers": ["last 2 versions", "IE >= 11"]
},
"useBuiltIns": true
}
]
]
}
So I decided to use polyfill service . When you add the script to your HTML, based on the user-agent of the browser, it will check the compatibility tables for browsers and will fill the gap and polyfill or add that feature to the browser if it is necessary.
So in chrome you will see the polyfill.min.js file is quite small and in IE it has more content to add the promise to your browser.
How to introduce it to the project?
Simple.
1- go to the polyfill website
2- get the url to the script
3- add the url to your html (before the rest of scripts)
4- use your webpack or any strategy to transpile and bundle your scripts and import Axios to your code.
Then when you run your code, you will see in both IE and chrome you will get polyfill script but in chrome it is around 0Byte and in IE it is bigger since it is provided some code for IE to understand promise.