玖叶教程网

前端编程开发入门

前端地震!core-js作者放弃开源?(前端地图引擎)

家好,很高兴又见面了,我是"高级前端?进阶?",由我带着大家一起关注前端前沿、深入前端底层技术,大家一起进步,也欢迎大家关注、点赞、收藏、转发!

前言

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是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。

从NPM的月下载数据来看,在2022年1月左右core-js月下载量达到了惊人的2亿,即使按周维度来看,NPM的周下载量在最近一周也达到了惊人的35,114,396,即3500W左右。

将core-js的下载周期拉长到最近一年,从下图可以看出下载量基本是趋于平缓的(除了2022年12月的一个低谷)。

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

3.Core-js使用示例

3.1 全局引入

import 'core-js/actual';
Promise.resolve(42).then(it => console.log(it)); // => 42

Array.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)); // => 42

Array.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)); // => 42

from(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

发表评论:

控制面板
您好,欢迎到访网站!
  查看权限
网站分类
最新留言