面對繁忙的日程安排與緊迫的工期限制，選擇能夠切實(shí)提升生產(chǎn)率的工具無疑至關(guān)重要。

在這里，我整理出一份個(gè)人最喜歡的 NPM 軟件包清單。為了便于瀏覽，我還對它們進(jìn)行了分類，希望呈現(xiàn)出更加清晰的結(jié)構(gòu)。

當(dāng)然，大家不必全數(shù)安裝與學(xué)習(xí)。在大多數(shù)情況下，每個(gè)類別選擇一款就足以解決生產(chǎn)需求。我只是想多提供一點(diǎn)替代方案，幫助每位讀者朋友找到最適合自己的選項(xiàng)。閑言少敘，咱們馬上開始！

前端框架

1.React

React 使用虛擬 DOM 將頁面中的各個(gè)部分作為單獨(dú)的組件進(jìn)行管理，因此您可以只刷新該組件而非整個(gè)頁面。React 經(jīng)常配合 React-dom 與 React-router-dom 一同使用。

項(xiàng)目鏈接：

https://www.npmjs.com/package/react

2.Vue

Vue 將 React 及其他框架的優(yōu)點(diǎn)集于一身，強(qiáng)調(diào)以更快、更輕松、更愉悅的使用感受編寫 Web 應(yīng)用程序。Vue 的說明文檔質(zhì)量極高，而且經(jīng)常配合 Vue-router 與 Vuex 一同使用。

項(xiàng)目鏈接：

https://www.npmjs.com/package/vue

3.Svelte

Svelte 是一種新的 Web 應(yīng)用程序構(gòu)建方法。這是一款編譯器，能夠?qū)⒛穆暶餍越M件轉(zhuǎn)換為可以精確對 DOM 加以更新的高效 JavaScript。

其他出色框架還包括 Angular,Ember,Backbone,Preact 等等。大家選擇哪一款都沒有問題，但請務(wù)必注意一點(diǎn)——先認(rèn)真學(xué)習(xí)現(xiàn)代 JS（ES6 及更高）。

項(xiàng)目鏈接：

https://www.npmjs.com/package/svelte

樣式框架

4.Bootstrap

全球最受歡迎的框架選項(xiàng)，用于構(gòu)建響應(yīng)式、移動(dòng)優(yōu)先型網(wǎng)站。其直觀而強(qiáng)大，但體積也相對較大。包括 React Bootstrap 與 Reactstrap 在內(nèi)的眾多現(xiàn)代 UI 軟件包都以 Bootstrap 為基礎(chǔ)。

項(xiàng)目鏈接：

https://www.npmjs.com/package/bootstrap

5.Tailwind

一種低級、實(shí)用程序優(yōu)先型 CSS 框架，用于快速 UI 開發(fā)。憑借著從零開始的構(gòu)建過程，Tailwind 可實(shí)現(xiàn)超級靈活的自定義空間。

項(xiàng)目鏈接：

https://www.npmjs.com/package/tailwindcss

6.Styled-components

CSS-in-JS 類工具，紙彌合了組件與樣式之間的鴻溝，提供一系列功能，使您能夠以功能性及可復(fù)用方式啟動(dòng)并運(yùn)行樣式組件。

其他重要解決方案還包括 Foundation,Bulma,Materialize 以及 Ant Design。如果您更傾向于編寫經(jīng)典 CSS，也可以使用某些 CSS 擴(kuò)展語言（例如 SASS）擴(kuò)展其功能。

項(xiàng)目鏈接：

https://www.npmjs.com/package/styled-components

后端框架

7.Express

一種快速、廣受好評的極簡 Node.js Web 框架。其體積相對較小，具有眾多可作為插件使用的功能。很多人將其視為 Node.js 服務(wù)器框架的客觀標(biāo)準(zhǔn)。

項(xiàng)目鏈接：

https://www.npmjs.com/package/express

8.Hapi

Hapi 最初用于 Express 框架。使用 Hapi，您能夠以最低開銷配合完整的即用型功能構(gòu)建起強(qiáng)大的可擴(kuò)展應(yīng)用程序。

項(xiàng)目鏈接：

https://www.npmjs.com/package/@hapi/hapi

9.Sails

Sails 是目前最具人氣的 Node.js MVC 框架，可支持現(xiàn)代應(yīng)用的一大核心需求：構(gòu)建起數(shù)據(jù)驅(qū)動(dòng)型 API，并輔以可擴(kuò)展且面向服務(wù)的架構(gòu)。

與前端框架類似，后端開發(fā)蠅的替代解決方案也不少，例如 Adonis 與 Koa。請按實(shí)際需求進(jìn)行選擇，然后深入學(xué)習(xí)吧～

項(xiàng)目鏈接：

https://www.npmjs.com/package/sails

CORS 與請求

10.Cors

Node.js 中間件，旨在提供一款 Connect/Express 中間件配合多種選項(xiàng)實(shí)現(xiàn)跨域資源共享。

項(xiàng)目鏈接：

https://www.npmjs.com/package/cors

11.Axios

基于Promise的瀏覽器與 Node.js HTTP 客戶端，易于設(shè)置、直觀并對眾多操作加以簡化，帶來比 Fetch API 更合理的使用體驗(yàn)。

項(xiàng)目鏈接：

https://www.npmjs.com/package/axios

12.Body-parser

主體解析中間件，用下載提取傳入請求流中完整主體部分，并將其公開在 req.body 上以供交互。

項(xiàng)目鏈接：

https://www.npmjs.com/package/body-parser

API 服務(wù)

13.Restify

一套 Node.js Web 服務(wù)框架，經(jīng)過優(yōu)化以構(gòu)建語義正確的 RESTful Web 服務(wù)供規(guī)?；a(chǎn)使用。Restify 針對自省與性能進(jìn)行了優(yōu)化。

項(xiàng)目鏈接：

https://www.npmjs.com/package/restify

14.GraphQL

一種面向 API 的查詢語言，同時(shí)也是可利用現(xiàn)有數(shù)據(jù)完成查詢的運(yùn)行時(shí)。GraphQL 在 API 中提供完整的數(shù)據(jù)描述，使客戶端能夠準(zhǔn)確獲取其需要的信息。

項(xiàng)目鏈接：

https://www.npmjs.com/package/graphql

Web sockets

15.Socket.io

Socket.IO 支持實(shí)時(shí)、雙向、基于事件的通信功能。它能夠運(yùn)行在各類平臺(tái)、瀏覽器及設(shè)備之上，且擁有良好的可靠性與速度表現(xiàn)。

項(xiàng)目鏈接：

https://www.npmjs.com/package/socket.io

16.WS

易于使用、快速且經(jīng)過全面測試的 WebSocket 客戶端與服務(wù)器實(shí)現(xiàn)。同時(shí)也是一套強(qiáng)大、抽象度更低且?guī)缀跄軌蚺c Socket.io 相媲美的替代方案。

項(xiàng)目鏈接：

https://www.npmjs.com/package/ws

記錄器

17.Morgan

一款 HTTP 請求記錄器，能夠存儲(chǔ) HTTP 請求并為用戶提供應(yīng)用運(yùn)作方式以及潛在錯(cuò)誤的簡明見解。

項(xiàng)目鏈接：

https://www.npmjs.com/package/morgan

18.Winston

一款幾乎支持所有傳輸方式的記錄器。其歷史比 Morgan 更長，也擁有更大的維護(hù)者社區(qū)及更廣泛的使用規(guī)模。

項(xiàng)目鏈接：

https://www.npmjs.com/package/winston

數(shù)據(jù)庫工具

19.Mongoose

Mongoose 是一款用于在異步環(huán)境下使用的 MongoDB 對象建模工具。Mongoose 支持回調(diào)機(jī)制。

項(xiàng)目鏈接：

https://www.npmjs.com/package/mongoose

20.Sequelize

Sequelize 是一款基于Promise的 Node.js ORM，適用于 Postgres、MySQL、MariaDB、SQLite 以及微軟 SQL Server。其具有可靠的事務(wù)支持、關(guān)鍵、急切與延遲加載、讀取副本等功能。

項(xiàng)目鏈接：

https://www.npmjs.com/package/sequelize

身份驗(yàn)證工具

21.Passport

Passport 的目標(biāo)在于通過一組策略（可擴(kuò)展插件）對請求進(jìn)行身份驗(yàn)證。您向 Passport 提交一項(xiàng)身份驗(yàn)證請求，其會(huì)提供 hook 以控制身份驗(yàn)證成功或失敗時(shí)各自對應(yīng)的處理方式。

項(xiàng)目鏈接：

https://www.npmjs.com/package/passport

22.Bcrypt

用于密碼散列處理的庫。Bcrypt 是由 Niels Provos 與 David Mazières 共同設(shè)計(jì)的一種密碼散列函數(shù)，以 Blowfish 密碼為基礎(chǔ)，于 1999 年首次在 USENIX 上亮相。

項(xiàng)目鏈接：

https://www.npmjs.com/package/bcrypt

23.JSONWebToken

JSON Web Tokens (JWT) 是一種開放的行業(yè)標(biāo)準(zhǔn) RFC 7519 方法，用于在兩端之間安全表達(dá)聲明。此工具包允許您對 JWT 進(jìn)行解碼、驗(yàn)證與生成。

項(xiàng)目鏈接：

https://www.npmjs.com/package/jsonwebtoken

配置模塊

24.Config

對存儲(chǔ)在應(yīng)用程序中的配置文件進(jìn)行設(shè)置，可以通過環(huán)境變量、命令行參數(shù)或外部源進(jìn)行覆蓋及擴(kuò)展。

項(xiàng)目鏈接：

https://www.npmjs.com/package/config

25.Dotenv

零依賴模塊，用于將環(huán)境變量從.env 文件加載至 process.env 當(dāng)中。

項(xiàng)目鏈接：

https://www.npmjs.com/package/dotenv

靜態(tài)站點(diǎn)生成器

26.Gatsby

一款現(xiàn)代站點(diǎn)生成器，能夠創(chuàng)建快速、高質(zhì)量的動(dòng)態(tài) React 應(yīng)用，涵蓋博客、電子商務(wù)網(wǎng)站及用戶儀表板等使用場景。擁有良好的插件生態(tài)與模板選項(xiàng)。

項(xiàng)目鏈接：

https://www.npmjs.com/package/gatsby

27.NextJS

NextJS 支持服務(wù)器渲染以及靜態(tài)內(nèi)容生態(tài)，您也可以在其中將無服務(wù)器函數(shù)定義為 API 端點(diǎn)。

項(xiàng)目鏈接：

https://www.npmjs.com/package/next

28.NuxtJS

NuxtJS 在本質(zhì)上屬于 Vue 生態(tài)系統(tǒng)中的 NextJS 替代方案。NuxtJS 的目標(biāo)是令 Web 開發(fā)變得更加強(qiáng)大且高效，同時(shí)充分保障開發(fā)人員的使用體驗(yàn)。

項(xiàng)目鏈接：

https://www.npmjs.com/package/nuxt

模板語言

29.Mustache

Mustache 是一種無邏輯模板語法，適用于 HTML、配置文件以及源代碼等幾乎一切場景。它通過使用哈希或?qū)ο笾刑峁┑闹?，在模板?nèi)擴(kuò)展標(biāo)簽。

項(xiàng)目鏈接：

https://www.npmjs.com/package/mustache

30.Handlebars

使用模板及輸入對象生成 HTML 或其他文本格式。Handlebars 模板在觀感上類似于帶有內(nèi)嵌 Handlebars 表達(dá)式的常規(guī)文本。Handlebars 與 Mustache 模板具有良好的兼容性。

項(xiàng)目鏈接：

https://www.npmjs.com/package/handlebars

31.EJS

EJS 是一種簡單的模板語言，允許您通過簡單語法、快速執(zhí)行與簡單調(diào)試等便捷優(yōu)勢生成以 JavaScript 編寫而成的 HTML 標(biāo)記。EJS 擁有龐大的活躍用戶社區(qū)，且自身發(fā)展態(tài)勢也相當(dāng)繁榮。

項(xiàng)目鏈接：

https://www.npmjs.com/package/ejs

圖像處理

32.Sharp

一款出色的模塊，能夠?qū)⒊Ｒ姼袷降拇髨D像轉(zhuǎn)換為尺寸較小、適合網(wǎng)絡(luò)瀏覽環(huán)境的 JPEG、PNG 及 WebP 圖像。

項(xiàng)目鏈接：

https://www.npmjs.com/package/sharp

33.GM

歸功于 Node.js 模塊 GM，您可以使用 GraphicsMagick 與 ImageMagick 兩大出色工具在代碼中對圖像進(jìn)行創(chuàng)建、編輯、合成與轉(zhuǎn)換。

項(xiàng)目鏈接：

https://www.npmjs.com/package/gm

34.Cloudinary

可簡化與云服務(wù)間協(xié)作的專用模塊，為 Web 應(yīng)用程序的整個(gè)圖像管理管道提供解決方案。

項(xiàng)目鏈接：

https://www.npmjs.com/package/cloudinary

日期格式

35.DayJS

DayJS 是一款快速且輕量化的 MomentJS(自 2020 年 9 月起進(jìn)入純維護(hù)模式) 替代方案。二者擁有類似的 API，只要您接觸過 MomentJS，就能夠快速上手 DayJS。

項(xiàng)目鏈接：

https://www.npmjs.com/package/dayjs

36.Luxon

前兩者的另一種輕量級替代方案，但 API 稍有不同。

項(xiàng)目鏈接：

https://www.npmjs.com/package/luxon

數(shù)據(jù)生成器

37.Shortid

能夠創(chuàng)建出簡短無序 url 友好型唯一 ID，適合作為 url 縮短器、生成數(shù)據(jù)庫 ID 及其他各類 ID。

項(xiàng)目鏈接：

https://www.npmjs.com/package/shortid

38.Uuid

便捷的微型軟件包，能夠快速生成更為復(fù)雜的通用唯一標(biāo)識符（UUID）。

項(xiàng)目鏈接：

https://www.npmjs.com/package/uuid

39.Faker

非常實(shí)用的工具包，用于在瀏覽器及 Node.js 中生成大量假數(shù)據(jù)。

項(xiàng)目鏈接：

https://www.npmjs.com/package/faker

驗(yàn)證工具

40.Validator

便捷的字符串驗(yàn)證器與消毒庫。其中包含多種實(shí)用方法，例如 isEmail(),isCreditCard(),isDate() 以及 isURL()。

項(xiàng)目鏈接：

https://www.npmjs.com/package/validator

41.Joi

面向 JavaScript 的強(qiáng)大 schema 描述語言與數(shù)據(jù)驗(yàn)證器。

項(xiàng)目鏈接：

https://www.npmjs.com/package/joi

表單與電子郵件

42.Formik

Formik 是一款流行的開源表單庫，易于使用且具備聲明性及自適應(yīng)性。

項(xiàng)目鏈接：

https://www.npmjs.com/package/formik

43.Multer

Multer 是一款 Node.js 中間件，用于處理上傳文件中的多部分 / 表單數(shù)據(jù)。

項(xiàng)目鏈接：

https://www.npmjs.com/package/multer

44.Nodemailer

Nodemailer 是一款面向 Node.js 應(yīng)用程序的模塊，可輕松通過電子郵件進(jìn)行發(fā)送。項(xiàng)目誕生于 2010 年，如今已經(jīng)成為大多數(shù) Node.js 用戶的默認(rèn)解決方案。

項(xiàng)目鏈接：

https://www.npmjs.com/package/nodemailer

測試工具

45.Jest

Jest 是一款便捷好用的 JavaScript 測試框架，以簡單為核心訴求。您可以通過易于上手且功能豐富的 API 編寫測試，從而快速獲取結(jié)果。

項(xiàng)目鏈接：

https://www.npmjs.com/package/jest

46.Mocha

Mocha 是一套 JavaScript 測試框架，使異步測試變得更加簡單有趣。Mocha 以串行方式運(yùn)行測試，能夠在未捕獲異常與正確測試用例加以映射的同時(shí)，發(fā)布靈活而準(zhǔn)確的報(bào)告結(jié)果。

項(xiàng)目鏈接：

https://www.npmjs.com/package/mocha

Web 抓取與自動(dòng)化

47.Cheerio

Cheerio 被廣泛用于 Web 抓取，有時(shí)還身兼自動(dòng)化任務(wù)。其基于 jQuery，運(yùn)行速度極快。Cheerio 中打包有 Parse5 解析器，能夠解析任何類型的 HTML 與 XML 文檔。

項(xiàng)目鏈接：

https://www.npmjs.com/package/cheerio

48.Puppeteer

Puppeteer 被廣泛應(yīng)用于瀏覽器任務(wù)自動(dòng)化領(lǐng)域，且只能與谷歌 Chrome 無頭瀏覽器配合使用。Puppeteer 也可用于網(wǎng)絡(luò)抓取任務(wù)。與 Cheerio 模塊相比，其功能更加強(qiáng)大豐富。

項(xiàng)目鏈接：

https://www.npmjs.com/package/puppeteer

Linters 與格式化工具

49.ESLint

ESLint 用于識別并報(bào)告 ECMAScript/JavaScript 代碼中的模式。ESLint 具備全面的可插入特性，每項(xiàng)規(guī)則對應(yīng)一款插件，供您在運(yùn)行時(shí)添加更多內(nèi)容。

項(xiàng)目鏈接：

https://www.npmjs.com/package/eslint

50.Prettier

Prettier 是一款風(fēng)格鮮明的代碼格式化程序。它通過解析代碼并使用自己的規(guī)則（限定最大行長）對代碼進(jìn)行重新輸出，借此實(shí)現(xiàn)統(tǒng)一的樣式；亦可在必要時(shí)對代碼進(jìn)行打包。

項(xiàng)目鏈接：

https://www.npmjs.com/package/prettier

模塊捆綁器與最小化工具

51.Webpack

一款著名且功能強(qiáng)大的模塊捆綁器，旨在捆綁 JavaScript 以供瀏覽器環(huán)境使用。它也能夠轉(zhuǎn)換、捆綁或打包幾乎一切資源或資產(chǎn)。

項(xiàng)目鏈接：

https://www.npmjs.com/package/webpack

52.HTML-Minifier

輕量化、高度可配置且經(jīng)過良好測試的，基于 JavaScript 的 HTML 壓縮器 / 最小化工具（支持 Node.js）。

項(xiàng)目鏈接：

https://www.npmjs.com/package/html-minifier

53.Clean-CSS

適用于 Node.js 平臺(tái)以及一切現(xiàn)代瀏覽器的快速高效 CSS 優(yōu)化器，提供極高的可配置度與多種兼容模式。

項(xiàng)目鏈接：

https://www.npmjs.com/package/clean-css

54.UglifyJS2

JavaScript 解析器、最小化工具、壓縮器及美化工具包。它可以使用多個(gè)輸入文件，并支持豐富的配置選項(xiàng)。

項(xiàng)目鏈接：

https://www.npmjs.com/package/uglify-js

進(jìn)程管理器與運(yùn)行器

55.Nodemon

在 Node.js 應(yīng)用開發(fā)期間使用的簡單監(jiān)控腳本。易于重啟并默認(rèn)啟用并監(jiān)控文件變更，因此特別適合匹配開發(fā)流程使用。

項(xiàng)目鏈接：

https://www.npmjs.com/package/nodemon

56.PM2

帶有內(nèi)置負(fù)載均衡器的 Node.js 應(yīng)用生產(chǎn)流程管理器。更全面也更適合生產(chǎn)需求。您可以通過眾多參數(shù)進(jìn)行調(diào)整 / 操作。

項(xiàng)目鏈接：

https://www.npmjs.com/package/pm2

57.Concurrently

簡單而直接——可同時(shí)運(yùn)行多條命令的實(shí)用工具。

項(xiàng)目鏈接：

https://www.npmjs.com/package/concurrently

CLI 與調(diào)試器

58.Commander

提供流暢的 API，用于定義 CLI 應(yīng)用程序中的各類元素，包括命令、選項(xiàng)、別名及幫助等。簡化了命令行應(yīng)用程序的創(chuàng)建過程。

項(xiàng)目鏈接：

https://www.npmjs.com/package/commander

59.Inquirer

一款易于嵌入且非常美觀的 Node.js 命令行界面，提供很棒的查詢會(huì)話流程。

項(xiàng)目鏈接：

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

60.Chalk

Chalk 是一款非常簡單的庫，只負(fù)責(zé)實(shí)現(xiàn)一項(xiàng)功能——對終端字符串樣式進(jìn)行設(shè)置。

項(xiàng)目鏈接：

https://www.npmjs.com/package/chalk

61.Debug

一款微型 JavaScript 調(diào)試實(shí)用程序。只需將一個(gè)函數(shù)名稱傳遞給該模塊，它就會(huì)返回一個(gè)經(jīng)過修飾的 console.error 版本，以便將調(diào)試語句向其傳遞。

項(xiàng)目鏈接：

https://www.npmjs.com/package/debug

實(shí)用程序

62.Lodash

一套現(xiàn)代 JavaScript 實(shí)用程序庫，提供模塊化、性能與多種附加功能?？商峁╆P(guān)于 JavaScript 數(shù)組、對象及其他數(shù)據(jù)結(jié)構(gòu)的多種實(shí)用功能。

項(xiàng)目鏈接：

https://www.npmjs.com/package/lodash

63.Underscore

提供多種常用的功能助手及專業(yè)工具，包括函數(shù)綁定、JavaScript 模塊化、創(chuàng)建快速索引、深度相等測試等。

項(xiàng)目鏈接：

https://www.npmjs.com/package/underscore

64.Async

Async 提供直觀而強(qiáng)大的功能以配合異步 JavaScript。

項(xiàng)目鏈接：

https://www.npmjs.com/package/async

系統(tǒng)模塊

65.Fs-extra

Fs-extra 包含經(jīng)典 Node.js fs 包中未提供的多種方法，例如 copy(),remove(),mkdirs() 等。

項(xiàng)目鏈接：

https://www.npmjs.com/package/fs-extra

66.Node-dir

用于各類常見目錄及文件操作的模塊，包括獲取文件數(shù)組、子目錄以及對文件內(nèi)容進(jìn)行讀取 / 處理的方法。

項(xiàng)目鏈接：

https://www.npmjs.com/package/node-dir

67.Node-cache

一個(gè)簡單的緩存模塊，具有設(shè)置、獲取及刪除等方法，工作原理類似于 memcached。各鍵將擁有對應(yīng)超時(shí)（ttl），超時(shí)后其將過期并被從緩存中刪除。

項(xiàng)目鏈接：

https://www.npmjs.com/package/node-cache

其他

68.Helmet

幫助您設(shè)置各種 HTTP 標(biāo)頭以保護(hù)應(yīng)用程序。它屬于 Connect 式中間件，與 Express 等框架相兼容。

項(xiàng)目鏈接：

https://www.npmjs.com/package/helmet

69.PDFKit

DFKit 是一套面向 Node 及瀏覽器的 PDF 文檔生成庫，可輕松創(chuàng)建復(fù)雜的多頁可打印文檔。

項(xiàng)目鏈接：

https://www.npmjs.com/package/pdfkit

70.CSV

全面的 CSV 套件，包含 4 款經(jīng)過全面測試的軟件包，能夠輕松實(shí)現(xiàn) CSV 數(shù)據(jù)的生成、解析、轉(zhuǎn)換與字符串化處理。

項(xiàng)目鏈接：

https://www.npmjs.com/package/csv

71.Marked

用于解析 markdown 代碼的低級編譯器，不會(huì)引發(fā)長時(shí)間緩存或阻塞。

項(xiàng)目鏈接：

https://www.npmjs.com/package/marked

72.Randomcolor

一款用于生成美觀隨機(jī)顏色的小型腳本，您可以通過選項(xiàng)對象調(diào)整其產(chǎn)生的顏色類型。

項(xiàng)目鏈接：

https://www.npmjs.com/package/randomcolor

73.Pluralize

此模塊使用預(yù)定義規(guī)則表，按順序應(yīng)用各項(xiàng)規(guī)則以生成特定單詞的單數(shù)或復(fù)數(shù)形式。適用于以用戶輸入為基礎(chǔ)進(jìn)行自動(dòng)化調(diào)整等場景。

項(xiàng)目鏈接：

https://www.npmjs.com/package/pluralize

延伸閱讀：https://dev.to/madza/73-awesome-npm-packages-for-productivity-19p8

本公眾號全部博文已整理成一個(gè)目錄，請?jiān)诠娞柡笈_(tái)回復(fù)「m」獲取！