preface

You may not know much about core-js, but you must have used it directly or indirectly in your projects. Core-js is a JavaScript standard library that includes polyfills of ECMAScript 2020, features of ECMAScript in the proposals phase, new features of WHATWG/W3C, etc. It is therefore a “standard kit” for modern front-end projects.

Core-js is a collection library that provides new syntax and apis that older browsers don’t fully support.

Design concept

In addition to the importance of Core-JS itself, its implementation concept and design method are worth learning.

In fact, Core-JS is a gateway:

  • With Core-JS, we can get a glimpse into all aspects of front-end engineering;

  • Core-js is deeply bound to Babel, so learning core-JS can also help to better understand the Babel ecology, and then deepen the understanding of the front-end ecology.

  • By analyzing core-JS, we can sort out one of the most distinctive concepts on the front end — polyfill.

Core-js is a monorepo-style project built by Lerna. In its packages, we can see five related packages:

  • core-js

  • core-js-pure

  • core-js-compact

  • core-js-builder

  • core-js-bundle

Let’s start with Core-JS. The basic shim capability of core-JS implementation is the logical core of the whole core-JS.

For example, we could introduce global polyfills as follows:

import 'core-js';
Copy the code

Or as follows:

import 'core-js/features/array/from'; 
Copy the code

In the manner of introducing certain polyfills at the entrance to business projects as needed.

Why does core-JS have so many packages?

In fact, they all do their jobs and work together, so let’s look at them.

Core-js-pure provides shim capability without contaminating global variables. For example, we can follow:

 import _from from 'core-js-pure/features/array/from';
 import _flat from 'core-js-pure/features/array/flat'; 
Copy the code

To achieve an independent export namespace, thus avoiding global variable pollution.

Core-js-compact maintains the gasket requirements data according to browserslist to help us find the set of polyfills requirements that “fit the target environment”, such as the following code:

const {
    // array of required modules
    list, 
    // object with targets for each module
    targets, 
    } = require('core-js-compat') ({targets: '> 2.5%'
});
Copy the code

You can filter out the browser range that is used by more than 2.5% of the world and provide the shim capabilities that need to be supported in that range.

Core-js-builder can combine core-js-Compact with core-JS and take advantage of webpack capabilities to package core-JS code as required. Such as:

require('core-js-builder') ({targets: '> 0.5%'.filename: './my-core-js-bundle.js',
})
.then(code= > {})
.catch(error= > {});
Copy the code

Core-js gaskets that meet the requirements will be packaged into the my-core-js-bundle.js file.

The whole process can be demonstrated in code as follows:

require('./packages/core-js-builder')(
    { 
        filename: './packages/core-js-bundle/index.js' 
    }
).then(done).catch(error= > {
    // eslint-disable-next-line no-console
    console.error(error);
    process.exit(1);
});


Copy the code

babel-polyfill

It’s worth mentioning that you’ve probably heard of babel-polyfill, and babel-polyfill is a combination of core-JS and Regenerator-Runtime, so babel-polyfill is essentially core-JS.

conclusion

In conclusion, according to the design of subcontracting, we can find that Core-JS fully decouples its own capabilities and provides multiple packages that can be relied on by other projects. Such as:

Core-js-compact can be used by Babel ecology, where Babel analyzes gaskets that are loaded on demand according to the needs of the environment;

Core-js-builder can be used by node.js services to build shim packages for different scenarios.

reference

  1. Babel combining with core – js
  2. babel
  3. Front-end Infrastructure