Babel’s a tool that converts modern JavaScript’s syntax (ECMAScript 2015 and above) into a compatible version (ES5) for older browsers such as IE.
Babel can basically handle these things:
- Converts syntax to ES5
- Injects polyfill features automatically into the code
- Transpiles TypeScript
- And more
So when you write ES6+ code:
const test = [1,2,3,4,5]test.map(t => t * 2)
Babel transforms syntax like this:
You can see const is converted to var, and the arrow function is transformed to the function statement.
That’s why we can make use of any modern JavaScript in our codebase.
A polyfill is a piece of code that allows you to use the functionality of modern Web APIs on older browsers that don’t support this functionality.
Here’s an example: Object.entries isn’t available in IE11 and other browsers.
So a polyfill can be used to provide the code snippet that allows functionality in those browsers.
The actual code used for Object.entries is like this:
Basically, if you want to include a polyfill feature, you have to add the snippet manually or use Polyfill.io, which automatically includes all of the polyfills needed in a given browser accessed by a user.
To avoid confusion, let’s make it clear what Babel and polyfills can each cover.
The only thing Babel can do is to convert ES6+ syntax to ES5, if there aren’t any plugins.
The thing polyfills can do is inject a snippet code to support web APIs.
If you write Object.entries in your script and transpile it, you’ll see the result:
"use strict";var test = [1, 2, 3, 4, 5];Object.entries([]);
You can see Object.entries isn’t converted.
It needs to be polyfilled because it’s not a syntax but an API. If it goes on like this in IE11, you’ll run into an error saying Object doesn't support property or method 'entries'.
To avoid that, you have to include a polyfill, like this:
Before running Object.entries, the polyfill covers the feature.
So whether you’re using a syntax or an API is the difference between Babel and polyfills.
As I said, Babel can be used to transform ES6+ code to ES5.
In addition to that, Babal can be used to inject a polyfill during transformation.
This is how Babel adds a polyfill:
- Search for target browsers.
- Map target browsers to the core-js.
- Inject a polyfill.
Search for target browsers
At first, Babel is looking for target browsers needed to be polyfilled in a configuration file such as .babelrc, .babelrc.json, package.json, or babel.config.js.
So if you support IE11, you have to write it like this:
useBuiltIns: usage is an option that allows injection of a polyfill based on the files used in your project.
Map target browsers to the core-js
core-js is a library that provides a set of polyfill features.
Babel uses core-js-compact and maps it to targeted browsers in order to provide the necessary polyfill feature.
So when you target IE11, it’ll map IE11 and provide the polyfill code that IE11 doesn’t support.
Inject a polyfill
Lastly, Babel injects a polyfill based on the mappings.
Let’s take a look at some examples.
If you target IE11 and use core-js@3, you’ll need to write it in .babelrc:
Transpile the code like this:
const test = [1,2,3,4,5]Object.entries(test)
And you’ll see the result:
You can find that the snippets of Object.entries are included there.
If you target the latest Chrome version …
… you’ll see there’s no polyfill code in the output:
This is because Chrome supports Object.entries natively. It doesn’t need to be polyfilled.
