core.js 是个什么

  1. ECMAScript 的迅速成长以及浏览器的频繁更新换代,每年会出现新的api,举个例子es6时期诞生的’Promise’,‘Set’ 或者是’es7’ 数组新提供的方法’includes’,这些新加入的’api’,就引出一个词"polyfill" ‘polyfill(垫片/补丁)’ 就是用社区上提供的一段代码,让我们在不兼容某些新特性的浏览器上,使用该新特性

  2. 项目中加入’polyfill’几种方式

    2.1. 手动加入,缺少啥api 就手写一个

    2.2. 使用别人写好的库例如’es5-shim 、es6-shim、 core-js ’

  3. core-js 就是提供新语法api一个集合库

  4. core-js 它是JavaScript标准库的 polyfill(垫片/补丁), 新功能的es’api’转换为大部分现代浏览器都可以支持运行的一个’api’ 补丁包集合。

  5. 因为官方库对他介绍的形容

5.1. 它支持最新的 ECMAScript 标准

5.2. 它支持ECMAScript 标准库提案

5.3. 它支持一些 WHATWG / W3C 标准(跨平台或者 ECMAScript 相关)

5.4. 它最大限度的模块化:你能仅仅加载你想要使用的功能

5.5. 它能够不污染全局命名空间

5.6. 它和babel紧密集成:这能够优化core-js的导入

5.7. 它是最普遍、最流行 的给 JavaScript 标准库打补丁的方式

core-js 相关功能包

  1. 在’corejs’的工程项目的 packages文件中 中 ‘https://github.com/zloirock/core-js/tree/master/packages’,能看到五个相关包

1.1. ‘core-js’ 安装’npm install core-js’ 作用’定义全局的polyfill’

1.2.‘core-js-pure’ 安装 ‘npm i core-js-pure’ 作用’提供不污染全局环境的polyfill,等价于core-js@2/library’

1.3.‘core-js-compat’安装’npm i core-js-compat’ 作用维护了按照’browserslist’规范的垫片需求数据,来帮助我们找到’符合目标环境’的 ‘polyfills’ 需求集合

1.4.‘core-js-builder’ 安装’npm i core-js-builder’ 作用可以被 Node.js 服务使用,构建出不同场景的垫片包。

1.5.‘core-js-builder’ 安装’npm i core-js-builder’ 作用可以结合 ‘core-js-compact’ 以及 ‘core-js’,并利用 'webpack '能力,根据需求打包出 core-js 代码

core-js – 案例

  1. 现在想在’ie10’ 中使用数组方法’includes’ 因此需要使用’corejs’垫片功能,可以安装’npm install core-js’ ,变可以发现数组的’includes’ 在ie10的浏览器下也可以运行了

  2. ‘core-js’ 导入几种形式:

1
2
3
4
5
6
7
8
9
10
11
// 导入所有新提案api
import "core-js";
// 唯一稳定的'core js'功能-es和web标准
import "core-js/stable";
// 仅支持稳定的ES功能
import "core-js/es";
// 只导入指定api
import "core-js/features/set";

import "core-js/stable/set";
import "core-js/es/set";

core-js-pure

  1. core-js-pure 提供了不污染全局变量的垫片能力,例如 : ‘import _from from ‘core-js-pure/features/array/from’ 即可以对 数组的’from’ 方法重命名,这样就不会和某些支持的数组’from’环境变量名冲突

  2. ‘coe-js’ 需要在数组 Array 的原型上,以’污染数组原型’的方式来扩展方法。而 core-js-pure 则单独维护了一份 export 镜像

core-js-compat

包地址

  1. core-js-compat 可以帮助查询对应环境下需要的’api’ 使用:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
    const {
list, // array of required modules
targets, // object with targets for each module
} = require('core-js-compat')({
targets: '> 2.5%', // browserslist query or object of minimum environment versions to support
filter: /^(es|web)\./, // optional filter - string-prefix, regexp or list of modules
version: '3.16', // used `core-js` version, by default - the latest
});

打印结果:

console.log(targets);
/* =>
{
'es.symbol.match-all': { ios: '12.2-12.4' },
'es.array.unscopables.flat': { ios: '12.2-12.4' },
'es.array.unscopables.flat-map': { ios: '12.2-12.4' },
'es.math.hypot': { chrome: '77' },
'es.promise.all-settled': { firefox: '69', ios: '12.2-12.
...
}

实际组合

  1. core-js-compact 可以被 Babel 生态使用,由 Babel 分析出根据环境需要按需加载的垫片;

  2. core-js-builder 可以被 Node.js 服务使用,构建出不同场景的垫片包。

babel-polyfill

你可能听过’babel-polyfill’,babel-polyfill 融合了 core-js 和 regenerator-runtime,因此’babel-polyfill’ 本质就是’corejs’

文章参考

core-js 及垫片理念:设计一个“最完美”的 Polyfill 方案