Originally posted at michaelzanggl.com. Subscribe to my newsletter to never miss out on new content.
babel polyfill is commonly used to emulate a full ES2015+ environment and is extremely simple to use. You just install it via npm or yarn and import it in your app. Now you are ready to go and write next level JavaScript without having to worry about browser support, or are you...?
Turns out there is a variety of things that babel-polyfill does not include.
It's important to know that babel-polyfill is using core-js under the hood.
List of missing polyfills:
-
JSON
is missing only in IE7 -
String#normalize
is missing due to its rare usage and large size. Alternative polyfill: unorm -
Proxy
can't be polyfilled -
window.fetch
is not part of ECMAScript, but a web standard. While core-js does include some web standards,fetch
is currently not one of them. Alternative polyfill: github fetch -
Intl
is missing because of its large size. Alternative polyfill: Intl.js -
DOM polyfills. For example
element.closest
. What is included however are iterable DOM collections -
<script type="module">
. Instead, use bundlers likewebpack
orrollup
Also be aware of
- caveats when using Symbol polyfill
- caveats when using typed arrays polyfill
- caveats when using URL and URLSearchParams
If you know of anything else that is not included please leave a comment and I will add it to the list.
For a list of supported(tested) JavaScript engines please refer to https://github.com/zloirock/core-js#supported-engines
Top comments (4)
IE11 doesn't support
SVGElement.classList
and core-js doesn't provide that, as well.Some syntax can't be polyfilled, like lookbehinds in regular expressions. I found that out the hard way recently.
This saved me. Thank you, much appreciated.
You have forgotten the pointer events:
github.com/jquery/PEP