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 萬這個令人驚奇的數字。