Small knowledge, big challenge! This article is participating in the creation activity of “Essential Tips for Programmers”.

Hello, I’m Shanyue.

This is my front end engineering knowledge card collection 12/36 published in Denver

Core-js is the most famous polyfill of the ES standard. Polyfill means that when the browser doesn’t support the latest API, it will do it for you. You may deal with it every day, but you don’t know it.

For a while, when you implement NPM install and your project relies on Core-JS, you’ll find core-JS authors looking for jobs using NPM Postinstall.

Due to the presence of shippers, the volume increases as you pack, and the higher the browser versions you need to support, the smaller the shippers and the smaller the size.

The following code is the shim code for Array.from(ES6), with which you can use the Array.from API in any browser.

// Production steps of ECMA-262, Edition 6, 22.1.2.1
if (!Array.from) {
  Array.from = () = > { // omit some code}
}
Copy the code

whilecore-jsThe great thing about it is that it embraces everythingES6+Polyfill, and integrate inbabelAnd other compilation tools

Take an example:

Do you use promise. any in your development environment, which is a new ES2021 API and not yet implemented in some browsers, and use a new ES2020 operator? .

To make the code executable in most browsers, you will compile it to ES5 using Babel or SWC.

But then you see the problem,If you don’t do any configuration.babel/swcYou can only handle operators, not new apis. The following code will report an error

The good news is that core-js is integrated into Babel/SWC, and you can use @babel/preset-env or @babel/ Polyfill for configuration, as described in the documentation for Core-js. When configured, Babel compiles the code to automatically include the required polyfills, as shown below.

  • Click here for an online demo of the code