I've been learning through a course how to use babel in Javascript, I understood the idea that babel with the preset "env" transpiles later versions of ES into ES5. However I've come across a scenario where the array "includes" method is not changed at all by babel and doesn't work on IE11, to fix this I've read that there is a babel polyfill which can be used.
I've come across an answer which tried to explain this but I didn't follow it at all. Could someone simply explain why babel by default doesn't handle all ES transpilations and requires a polyfill.
If I understand correctly then a polyfill is something designed to fill a gap to make something work that isn't supported but I thought this is the job that babel is meant to be doing by default.
A polyfill uses the older version of the language itself to implement the newer feature. For example, Babel supports ES6 array.includes by implementing the method in ES5 itself. Something like
Array.prototype.includes = function(val) {
return this.indexOf(val) >= 0;
}
On the other hand, babel's core library is a transpiler. This is responsible for converting features of newer versions of javascript to older versions that aren't possible via writing a polyfill in the older version. For example, it would be impossible to write a polyfill for converting ES5's let or const into var, or converting arrow functions into traditional functions. Operations like these need a transpiler to walk through the code and convert it.