从 GitHub 的 package.json 看前端发展趋势

Posted 2021-04-30 卓朗科技技术中心

StateOfJS 每年都会发布一份 javascript 的发展报告，而 2018 年的报告也已经出炉了。在 2018 年的报告中，总共有来自 153 个不同的国家共 2 万多名 JavaScript 开发者参与了这次调查（中国占总数的 0.37%，共 75 个开发者）。在这份报告中，React 是最受欢迎的前端框架，而 Vue 则紧随其后是第二受欢迎的框架。由于这次调查的样本中中国占比太小也导致了 Vue 的数据不够准确。

在国内甚至有部分用户有一种 Vue 才是世界第一框架的错觉：

根据国内 cnpm 的统计数据显示，Vue 的每周下载量已经和 React 不相上下，但是从总体趋势上看，Vue 在中国的份额会在 2019 年超越 React。借助东方神秘力量的加持，在世界范围内 Vue 和 React 的差距也会进一步缩小。去年（2017 年）Vue 的下载量只有 React 的 1/10，而今年的下载量已经上升到了 1/7。从今年 6 月份开始，Angular 的下载量一路飙升达到了 Vue 的 3 倍，而在国内 Angular 基本上已经淡出了开发者的视野。除了那些大公司的企业级开发之外，越来越多的小型公司 Startup 选择了 Vue 和 React。

这份报告是由抽样投票调查而来。除了这份报告以外，一名国外前端开发者抓取了 GitHub 上的 56 万个 JavaScript 仓库，通过分析仓库里面的 package.json 文件得出了另一份 JavaScript 报告。这份报告不分国籍和种族，是一份真正的来自 GitHub 开源社区使用者的数据。

作者从 56 万个 package.json 里面提取了共 810 万个依赖项。熟悉 Node.js 的开发者都知道，package.json 的依赖项分为两种：dependencies 和 devDependencies。前者依赖的 npm 包则会在正式上线后使用，而后者的依赖则是在开发阶段使用。

我们首先看一下去年的数据（2017.08-2018.08）：

图的右半部分展示了数量，越长表示使用量越多。而左半部分又分为两边：左边是开发阶段中使用的比率，右边则是上线阶段使用的比率。我们可以看到，被使用最多的几个包/框架分别是：

• eslint

• mocha

• express

• webpack

• gulp

而上面的包/框架，只有 express 是在生产环境中使用，其它几个都是用在开发阶段。除了 React 之外，同时上榜的还有 jQuery。

很多开发者对如何放置依赖项可能会产生混淆，或者将 npm 包安装在错误的位置。但是也有一些库确实会出现在两个不同的位置。例如，jQuery 同样可能出现在两种依赖类型中，因为一些项目将其用作普通依赖项，而其他项目则使用 jQuery 发布一些演示例程，或者帮助测试程序是否正确，因此将其安装在了 devDependencies 中。

让我们看看最受欢迎的有问题的包（同时出现在两种类型的依赖项中）：

唯一上榜的框架是 Vue，而柱状图的长度也大致和 jQuery 相当。Vue 因其易于上手而深受初级前端开发者青睐，但是也导致了开发者对 package.json 的错误使用。不过，也有部分开发者使用 Vue 作为 jQuery 的替代品做一些开发阶段展示用的 Demo。

前端开发者最感兴趣的还是框架的趋势：

毫不奇怪，React 的使用率达到了 16%（2017 年 5 月）。大部分框架都是随其发布时间而慢慢增长，唯独 Angular 完全不同，Angular 的受欢迎程度在 2016 年 5 月急剧增长（这是第一个 RC 版本的日期）。这可以通过 Angular 的发布来解释，这是 Web 行业中的一件大事，特别是考虑到以前的版本在社区中已经建立了很好的地位。但是为什么 Angular 1.x 在这个图表中的受欢迎程度如此之低呢？这是由于它的发布方式。最初，Angular 1.x 并不推荐使用 npm 方式，而是采用传统的 CDN 模式。这种情况同样也适用于 jQuery，但是令人惊讶的是 jQuery 在 npm 上达到了 12% 的下载量。

我们再来看一下每个月新建的项目中，框架的使用数量：

由此我们可以判断框架的趋势，如果一个框架在新项目中出现的频率变低，则说明开发者正在放弃使用此框架。从上图可以看到，框架的走势线与灰色的柱状图高度吻合，柱状图表示项目总数，走势图表示新项目中使用框架的数量。虽然很多人预言 Angular 正在慢慢被开发者抛弃，但是从开发者的使用情况中丝毫没有展示出这种趋势。

除了 npm 趋势之外，很多人喜欢使用 GitHub 上的 star 数来作为框架受欢迎程度的决定因素。而不久前 Vue 的 star 数也超越了 React。我们来做一张 GitHub Star 走势图：

看来 GitHub Star 和流行程度并没有直接关系。目前，Vue 拥有 11.3 万个 Star，但是仅有 7092 个项目使用它。React 拥有 11.0 万 Star（比 Vue 少 3 千），但是有 45706 个项目它（比 Vue 多 6 倍）。

看完了框架，我们再来看一下构建工具的趋势：

上图基本代表了构建工具的更新换代过程：grunt -> gulp -> webpack。当 gulp 发布后可以看到 grunt 的使用量剧减，gulp 很快成为前端构建工具的主流。而 webpack 在发布初期对 gulp 的影响则很小，随后 gulp 的增长逐渐放慢，不久后有了渐渐下降的趋势。同样趋势图还展示了 webpack 和 Babel 的关系，两者的走势是完全吻合的。

单元测试和断言库的趋势：

mocha 依然是最流行的测试框架。老牌测试框架 Jasmine 和 Karma 正在慢慢被抛弃，而 Facebook 开发的 jest 迅速起飞，即使在 React 走势有所下降的情况下，jest 依然在增长。

前端框架使用测试库的情况：

此图还为我们展示了另一个信息，Angular 项目是使用测试库最多的。虽然 Vue 的官方文档中推荐了 Karma，但是 Vue 项目使用最多的却是 mocha。同理，React 官方文档中推荐了 jest，但是 React 项目使用最多的也是 mocha。这无疑也从另一个角度表明了 mocha 是最流行的测试框架。

最有意思的图表是 E2E 测试：

protractor 可谓一枝独秀，其中的原因可能是它包含在了 Angular 项目中。Puppeteer 发布时间很短，但是最近几个月获得了巨大的人气和增长。我们还可以看到， e2e 测试的整体使用率并不高，即使是使用率最高的 protractor 在其最高点也仅仅只有 5% 的使用率。

静态代码检查工具：

由于历史原因，不少项目还在使用 jshint。但是毫无疑问 eslint 目前已经是前端项目的主流 lint 工具，尤其是在 2016 年 jscs 与 eslint 合并。Prettier 严格来说并不是一个 lint 工具，而是一个 format 工具。自发布以来就备受关注，它提供了一种静态分析代码的新思路。Prettier 和 eslint 之间也不存在竞争关系，因为两者可以在一个项目中同时使用。Prettier 同样由 Facebook 团队创建。

最后再放一张备受开发者关注（尤其是中国开发者关注）的 React 和 Vue 对比图：

这张图并不是 React 和 Vue 的流行趋势对比图，而是那些流行的库在两个框架中的分布图。

先解释一下这个图：如果包出现在右上角则说明在两个框架中都流行，出现在左上角则说明在 Vue 中流行而在 React 中不流行，出现在左下角则说明在两个框架中都不流行，出现在右上角则说明在 React 中流行而在 Vue 中不流行。

这个结果还是让不少开发者感到惊讶，因为 Vue 中出现了很多前端开发者可能从来没有听说过的包：laravel-mix 和 laravel-elixir。如果我们查看 npm 就会发现 laravel-mix 每周有近 10 万的下载量。而其中的原因则是由于一个 php 框架：Laravel 是 PHP 语言的一个非常流行的后端框架，而 Laravel 框架默认使用 Vue 作为其前端开发库。

总体而言，在构建工具和静态检查领域 webpack 和 eslint 目标还没有强有力的直接竞争者。而在其它方面，没有哪个框架/库具有压倒性优势。另一方面，此次分析来自 GitHub，众所周知 GitHub 是用来托管开源项目的平台，开发者有可能在实际工作中使用某个框架但是当参与开源项目时却选择了另一个框架，也可能开源项目更加偏向于某些框架。

另一方面，考虑到中国的特殊性，如果出一份中国区的前端报告 Vue 的使用率应该要高于 React。不论是知乎、SegmentFault、掘金等社区的话题讨论数量，还是招聘简历中的技能描述，Vue 都从整体上有多于 React 的趋势。

无论框架和库如何更新换代，唯一不变的就是 JavaScript 本身。作为一名前端工程师我们不应该满足于现有技术而止步不前，面对当今各种日新月异的新技术开发者们更应该“精通 one，学习 another，关注 next”。