npm(10个最流行的NPM包)

时间：2023-08-09 15:25:08 阅读：4

10个最盛行的NPM包

作者 | 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 万这个令人惊奇的数字。