微信号:frontshow

介绍:InfoQ大前端技术社群:囊括前端、移动、Node全栈一线技术,紧跟业界发展步伐。

10个最流行的NPM包

2019-06-12 19:07 Areknawo

作者 | Areknawo
编辑 | 王莹

我们将在这篇文章里回顾一下 Web 开发领域的NPM——世界上最大的包注册中心。截止到 6 月 4 日,NPM 包的数量已经超过了一百万。或许你也已经知道这个数字了,所以让我们来庆贺一下吧。

网上到处都有描述该事实的文章,所以我不打算再累述,我决定另辟蹊径。在本文中,我们要祝贺 NPM 取得的成绩,并列出 10 个最流行的包。

背景简介

在开始之前,我想先分享下我的个人看法。

当然,一百万个包算得上是一个巨大的成功,对吗?如果你对 JS 生态系统比较熟悉,就会明白实际情况是怎么样的。一百万是个惊人的数字,我认为其中只有很少的一部分是实际 有用的。在这一点上,我们可以达成共识。包太多也是个大麻烦—— 一个代码垃圾场,是我们(JS 开发人员)创造了这些垃圾代码。但为什么会这样?可能是因为 NPM 太简单了?近年来,JavaScript 的普及呈指数级增长,NPM Registry 也是。NPM 中的 JS 代码很简单,而且可移植。这让编程的门槛变得相当的低,入门者和初学者也能很快学会如何使用它们。当然,这也是 NPM 很专业的方面,对后续影响很大。

有人会说“把 NPM Registry 的一半内容砍掉吧”——但这样做并不容易。当然,砍掉“废弃包”是可以的,但这也只能解决很少部分的问题。有很多包,即使是没有人在维护,也不常用,也仍有不同的人群在使用,把它们彻底删除会导致他们的项目崩溃。当然,我们可以把这些包标记为已弃用,希望人们能够注意到它们,然后过段时间删除它们,但这真的是个好的解决方案吗?

我们知道,这些数字揭示了开发流程在过去几年中的一些重要的变化。从开发单独的程序,到使用 jQuery 和 CDN,再到 NPM。你可以安装整个 NPM 包,拷贝其中的一小部分代码,就能做一个很好的演示。这有点搞笑,但却也是一个可怕的事实。我们在某些有利的方面使用 NPM 包,但不要过度依赖它们,让它们成为代码的主要组成部分。

另外,NPM 由公司 NPM 进行管理的,这也是那些心存顾虑的人不能欣然接受 NPM 的原因。因为缺少可替代方案(在这点上,有一些工作正在进行中,详见下面的链接),而且只有几个镜像(如 Yarn),对于你正在使用使用或者创建的包,永远无法确保它们将来是否仍然可用。这有点像是基于信任的约定,至少到目前为止是这样的。

相关链接:

一些正在进行中的工作: https://github.com/features/package-registry

Yarn: https://yarnpkg.com/en/packages

排名

为清楚起见,先让我们来定义一下什么是“流行”包。从不同的角度看,这个清单会有所不同。以下载最多的包为例,它们包括直接被下载的包,也包括被其他包依赖的包。这样可能会让一些包(如 Yargs 比其他包(如 React)的排名更靠前。不过,在本文中,“流行”包是指下载次数比其他包高很多的包。当然,包下载的方式很难确定,所以我们会根据逻辑判断和每周原始下载量来进行排名。

10. React

React 以每周 5 百万的下载量毫无意外地被包含在该清单中。从 GitHub 关注量来看,Vue 在去年超过了 React,但 NPM 的统计数据清楚地显示了哪个 UI 工具被使用得更多。这意味着 React 仍是最受欢迎的 UI 库。另外,我觉得不需要对其做更深入的介绍。

9. Prop-types

Prop-types 是该清单中第二个与 React 相关的包。顾名思义, 它是一个很小的库,允许添加类型到 props,确保 React 组件类型安全。React 的官方文档对此做了很好的解释。

import PropTypes from 'prop-types';

class Greeting extends React.Component {
render() {
return (
<h1>Hello, {this.props.name}</h1>
);
}
}

Greeting.propTypes = {
name: PropTypes.string
};

当然,该库需要在运行时才发挥作用,我们可以在生产环境对它做些简单的处理,以便得到更好的性能。

我个人从未使用过该库。因为我是 TypeScript 的用户和忠实粉丝,所以这种工具对我来说不是必需的。对 Flow 用户来说也是如此。这些语言 / 类型检查器所提供的功能远比 prop-types 好的多。这也很容易理解,因为该库只对 React props 做类型检查。如果想在工程中引入更高级别的类型安全,我仍推荐使用 TypeScript。

8. Moment

我们发现 Moment.js 是能找到的最稳定最容易维护的时间操作库之一。在所有库中,Moment.js 用于解决格式化、解析、转换等问题,并和其它格式的时间配合工作,是应用最广的一个库。

import moment from "moment";
// in relation to release date of this post
moment().format("MMMM Do YYYY"); // June 6th 2019
moment("20111031", "YYYYMMDD").fromNow(); // 8 years ago
moment().subtract(10, "days").calendar(); // 05/27/2019

在最新的 v2 版本中,Moment.js 为了支持最新的 ES6 语法进行了重写,提高了模块化和更好的性能。这是很重要的,特别是在使用像 Moment.js 这么大的库的时候!解压后约为 66KB, 详情见下方链接: https://bundlephobia.com/result?p=moment

7. Express

Express 是一个几乎人尽皆知的 Web 框架,它和 Node.js 一起用来做后端开发。Express 是构建 Node.js API 之上的一个抽象层,提供了用于创建成熟后端所需的一切。

import express from "express";

const app = express();

app.get("/", function (req, res) {
res.send("Hello World");
});

app.listen(3000);

得益于 Express 的中间件架构,且提供了相对简单而固化的 API,所以具备相当好的可扩展性,让它成为很多其它后端框架的基础,比如 Feathers: https://feathersjs.com/

6. Request

每周 1400 万的下载量说明了基础 HTTP 功能的重要性。易用性、异步、独一无二的 API、对 Node.js 文件系统 API 很好的集成,这些只是该库众多优点中的一部分。

import request from "request";

request("http://www.google.com", (error, response, body) => {
console.log("error:", error);
console.log("statusCode:", response && response.statusCode);
console.log("body:", body);
});

在功能性和 API 方面,Request 重组了最新的 Fetch API。该库在原生解决方案里最显著的优点包括支持 Node.js 和不同的浏览器。类似的 API 也让相互切换变得简单方便。

相关链接:

Fetch API: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

5. Lodash

谁会不知道 Lodash 呢?使用最广泛的 JS 辅助工具库。大量的库、工具和工程都依赖于它。即使没有使用过它的人(包括我自己)也得承认它是多么有用,至少在一些场景下是这样。速度快、模块化、功能齐全——你还想要什么?

import _ from "lodash";

_.defaults({ a: 1 }, { a: 3, b: 2 }); // { 'a': 1, 'b': 2 }
_.partition([1, 2, 3, 4], n => n % 2); // [[1, 3], [2, 4]]
4. Async

就像 Lodash 是通用的 JS 辅助工具库,Async 是异步 JS 的辅助工具库!它提供了约 70 个不同的函数用于异步迭代操作。

import async from "async";
import fs from "fs";

/* fs.stat and the whole Node.js FS API
is a great example of asynchronous methods */
async.map(["file1", "file2", "file3"], fs.stat, (err, results) => {
results; // array of files stats
});

而且该库可与回调、promise 和最新的 await/asyn 一起使用。

3. Chalk

我们开始介绍与终端相关的工具和库。Chalk 是一个相当简单的库,创建它的目的很简单——样式化终端字符串!结果证明,最有用的也正是最简单的。

import chalk from "chalk');

// string concatenation - template literals
console.log(`${chalk.blue("Hello")} World${chalk.red("!")}`);

// chainable API
console.log(chalk.blue.bgRed.bold("Hello world!"));

当然,它的 API 很简捷,对原生 JS 的所有功能都支持得很好。官方文档申明,有 2 万个不同的包使用了 Chalk。也许这就是每周下载量的由来(约 2500 万)。

2. Commander

Commander.js 是创建 Node.js 终端应用的一个简单而轻量级的解决方案。它只提供了很小的函数集,让创建 CLI 应用程序变得相对简单而有趣。

import program from "commander";

program
.version("0.1.0")
.option("-p, --peppers", "Add peppers");
.option("-P, --pineapple", "Add pineapple");
.option("-b, --bbq-sauce", "Add bbq sauce");
.option("-c, --cheese [type]",
"Add the specified type of cheese [marble]",
"marble");
.parse(process.argv);

Commander 并没有提供全方位的功能。但即使在很多复杂的场景下,它也足够可用。

在开始创建 CLI 应用程序时,需要区分 Commander.js 和 Inquirer.js(1200 万)。Commander 用于在“幕后”管理应用程序,而 Inquirer 则让“前端”看起来更漂亮,带有不同的交互式控件。你可以将两者很方便的结合起来(强烈建议),创建很酷的应用程序。

相关链接:

Inquirer.js: https://www.npmjs.com/package/inquirer

1. Debug

在这个清单中,Debug 库名列榜首。Debug——这个我以前并没实际使用过的包——其周下载量几乎是 Commander.js 的两倍(4200 万),真是令人难以置信!

该模块将“简单”原则贯彻到一个完全不一样的层次。它是一个受 Node.js 启发的调试辅助工具,让用户可以将 log 根据不同的模块进行分组,可以方便地切换调试输出。当然,它也涉及到样式和标签,不过它们不是该包的主要功能。

import debug from "debug";
import http from "http";

const httpDebug = debug("http");

httpDebug('booting %o', name);

http.createServer((req, res) => {
httpDebug(`${req.method} ${req.url}`);
res.end("hello\n");
}).listen(3000, () => {
httpDebug("listening");
});

所以,4200 万的下载量从何而来呢?从库和工具如 ESLint (600 万)、Babel (700 万)、以及前面提到的 Express (900 万)、Mocha (200 万)、Socket.io (200 万)而来,还有 2 万 8 来自其它地方。简单的相加,就可以得到 4200 万这个令人惊讶的数字。

流行能说明问题吗?

这就是我个人给出的清单,包括知名的和不那么知名的 NPM 包。一个包是否流行会有什么不一样吗?也许不会。当然,这意味着这个包更稳定,易于维护,等等。但这也并不代表我们就一定使用了这些包,假设你使用了一个包,而这个包又依赖于其它包,那么你就无形之中提升了被依赖的包的流行程度。

英文原文: https://areknawo.com/10-most-popular-npm-packages/

 
前端之巅 更多文章 2020年你应该知道的8种前端JavaScript趋势和工具 Flutter VS React Native,应该选哪个? 未来PWA将取代本地应用,\\b成为构建良好用户体验的首选方式 WHATW击败W3C,赢得HTML和DOM的控制权 百度自研面向智能设备的语音交互编程语言VSL:用于实现语音交互视图
猜您喜欢 问诊白求恩之重做日志:分析日志容量及切换频率 现代JavaScript开发中的设计模式 [译]微软发布Excel的3D数据可视化工具插件GeoFlow 对付黑客,这些国家用了哪些奇招? 【产品思维】产品经理的取舍之道与抽象能力