各人好,很快乐又碰头了,我是"高级前端进阶",由我带着各人一路存眷前端前沿、深切前端底层手艺,各人一路前进,也欢送各人存眷、点赞、保藏、转发!

高级前端进阶
媒介core-js 做者 Denis Pushkarev 比来颁发了一篇长文《So, what's next?》,他暗示比来发作的工作让本身颇有慨叹,于是用很大篇幅讲述了本身的开源履历和遭遇以及心态变革。
从 Denis 的履历来看,放弃高薪工做来维护 core-js 完全就是为爱发电,即便 core-js 的用户数到达了惊人的量级,但鲜有人愿意为他投入的时间和精神付出酬劳。

Denis 暗示,本身曾在GitHub 和 npm 的主页 README 中发布过筹款信息,但最初一个月只收到了 57 美圆的捐赠。为此,他还在 core-js 的 CLI 中添加了响应的求职信息,却引来了许多不友好的回应。因而,做者有可能考虑闭源core-js!详细工作的脉络能够参考文末的材料,本文不再深切展开,将会将重点放在core-js,即那个核心的库上面。
1.什么是core-js?
什么是core-js?
Core-js是JavaScript 的模块化尺度库。 包罗 ECMAScript 的 Polyfill 到 ES2023,次要囊括:PRomise、Symbol、Collections、 Iterators、 TyPEd Arrays,、类型数组以及许多其他特征、ECMAScript 提案、一些跨平台的 WHATWG/W3C 特征和提案等等。
将上面的简短介绍拆开来看,次要包罗以下核心特征:
Core-js是 JavaScript 尺度库中更流行和最通用的 polyfill,它为最新的 ECMAScript 尺度和提案供给撑持,从古老的 ES5 功用到迭代器等前沿功用,以及与 ECMAScript 亲近相关的 Web 平台功用,如 structureDClone等等。Core-js是最复杂和最全面的 polyfill 项目。 core-js 包罗大约 5000 个复杂水平差别的 polyfill 模块(NPM文件数量显示为3331),从 Object.hasOwn 或 Array.prototype.at 到 URL、Promise 或 Symbol等等。 Core-js更大限度地模块化:能够允许开发者仅加载需要的功用,并且能够不污染全局定名空间。Core-js不是一个框架,其专为与东西集成而设想,并供给了为此所需的一切。例如:babel-polyfill、@babel/preset-env、@babel/transform-runtime,类似的 SWC 功用都基于 core-js,并且最重要的是开发无感,开箱即用。2.Core-js的开发者数据从Github的数据来看,core-js项目已经创建超越了10年时间,最新版本为2.28.0,Github上的star数量到达了19.6k,fork数据也到达了1.5k。

core-js的github数据
从NPM的月下载数据来看,在2022年1月摆布core-js月下载量到达了惊人的2亿,即便按周维度来看,NPM的周下载量在比来一周也到达了惊人的35,114,396,即3500W摆布。

core-js每月下载量
将core-js的下载周期拉长到比来一年,从下图能够看出下载量根本是趋于平缓的(除了2022年12月的一个低谷)。

core-js比来一年下载量
从以上开发者数据来看,core-js确实是前端界的灿烂明珠,若是将其闭源,那么将会有太多项目遭到影响。按照Github Gits的2023/02/6号的官方数据,目前core-js的项目依赖量是惊人的,到达了9369个,在所有库的项目依赖量中排名33位(第一名是lodash,确实是比力诧异)。

core-js的项目依赖量数据
3.Core-js利用示例3.1 全局引入import 'core-js/actual';Promise.resolve(42).then(it => console.log(it)); // => 42Array.from(new Set([1, 2, 3]).union(new Set([3, 4, 5]))); // => [1, 2, 3, 4, 5][1, 2].flatMap(it => [it, it]); // => [1, 1, 2, 2](function * (i) { while (true) yield i++; })(1) .drop(1).take(5) .filter(it => it % 2) .map(it => it ** 2) .toArray(); // => [9, 25]structuredClone(new Set([1, 2, 3])); // => new Set([1, 2, 3])3.2 按需引入也允许开发者仅加载所需的功用:
import 'core-js/actual/promise';import 'core-js/actual/set';import 'core-js/actual/iterator';import 'core-js/actual/array/from';import 'core-js/actual/array/flat-map';import 'core-js/actual/structured-clone';Promise.resolve(42).then(it => console.log(it)); // => 42Array.from(new Set([1, 2, 3]).union(new Set([3, 4, 5]))); // => [1, 2, 3, 4, 5][1, 2].flatMap(it => [it, it]); // => [1, 1, 2, 2](function * (i) { while (true) yield i++; })(1) .drop(1).take(5) .filter(it => it % 2) .map(it => it ** 2) .toArray(); // => [9, 25]structuredClone(new Set([1, 2, 3])); // => new Set([1, 2, 3])3.3 不污染全局变量在没有全局定名空间污染的情况下利用Core-js:
import Promise from 'core-js-pure/actual/promise';import Set from 'core-js-pure/actual/set';import Iterator from 'core-js-pure/actual/iterator';import from from 'core-js-pure/actual/array/from';import flatMap from 'core-js-pure/actual/array/flat-map';import structuredClone from 'core-js-pure/actual/structured-clone';Promise.resolve(42).then(it => console.log(it)); // => 42from(new Set([1, 2, 3]).union(new Set([3, 4, 5]))); // => [1, 2, 3, 4, 5]flatMap([1, 2], it => [it, it]); // => [1, 1, 2, 2]Iterator.from(function * (i) { while (true) yield i++; }(1)) .drop(1).take(5) .filter(it => it % 2) .map(it => it ** 2) .toArray(); // => [9, 25]structuredClone(new Set([1, 2, 3])); // => new Set([1, 2, 3])更多关于core-js的用法能够参考文末的材料。
4.本文总结本文次要和各人介绍下那两天前端圈的大事,即core-js做者通过readme来表达本身遭遇的变故,以及core-js目前开源碰到的诸多问题。同时对Core-js是什么,core-js怎么用做了简单的介绍。若是有兴趣,文末的参考材料供给了大量优良文档以供进修。
参考材料https://www.oschina.net/news/228389/corejs-maintainer-so-whats-next
https://www.npmjs.com/package/core-js
https://github.com/zloirock/core-js/blob/master/README.md
https://github.com/zloirock/core-js#readme
发表评论