英文 | https://dev.to/madza/73-awesome-npm-packages-for-productivity-19p8

翻譯 | 楊小愛(ài)

在我們繁忙的日程和緊迫的項(xiàng)目期限內(nèi)，選擇能夠提高工作效率的工具，就顯得至關(guān)重要。

在這里，我整理了一些我最喜歡的 NPM 包的列表。我還對(duì)它們進(jìn)行了分類(lèi)，因此信息更加結(jié)構(gòu)化并且更易于瀏覽。

當(dāng)然，我們不必全部安裝和學(xué)習(xí)它們。在大多數(shù)情況下，從每個(gè)類(lèi)別中挑選一個(gè)兩個(gè)就足夠了。我想提供一些替代方案，以便我們能找到一些更好的工具。

現(xiàn)在，我們就開(kāi)始今天的內(nèi)容吧。

前端框架

1、React?

地址：https://www.npmjs.com/package/react

React 使用虛擬 DOM 將頁(yè)面的各個(gè)部分作為單獨(dú)的組件進(jìn)行管理，允許我們?cè)诓凰⑿抡麄€(gè)頁(yè)面的情況下刷新組件。通常與 React-dom 和 React-router-dom 一起使用。

2、Vue

地址：https://www.npmjs.com/package/vue

Vue 專注于使編寫(xiě) Web 應(yīng)用程序更快、更容易、更愉快的特性。它有很棒的文檔。通常與 Vue-router 和 Vuex 一起使用。

3、Svelte?

地址：https://www.npmjs.com/package/svelte

Svelte 是一種構(gòu)建 Web 應(yīng)用程序的新方法。它是一個(gè)編譯器，它獲取你的聲明性組件并將它們轉(zhuǎn)換為高效的 JavaScript，從而通過(guò)手術(shù)方式更新 DOM。

其他值得注意的框架包括 Angular、Ember、Backbone、Preact 等。你可以用它們中的任何一個(gè)來(lái)創(chuàng)造奇跡，黃金法則是提前學(xué)習(xí)現(xiàn)代 JS（ES6 及更高版本）。

樣式框架

4、Bootstrap

地址：https://www.npmjs.com/package/bootstrap

世界上最流行的UI框架，用于構(gòu)建響應(yīng)式、移動(dòng)優(yōu)先的網(wǎng)站。直觀且功能強(qiáng)大，但體積相對(duì)較大。許多現(xiàn)代 UI 工具包都基于它，例如 React Bootstrap 或 Reactstrap。

5、Tailwind

地址：https://www.npmjs.com/package/tailwindcss

用于快速 UI 開(kāi)發(fā)的低級(jí)、實(shí)用程序優(yōu)先的 CSS 框架。從頭開(kāi)始構(gòu)建，可定制。

6、Styled-components

地址：https://www.npmjs.com/package/styled-components

CSS-in-JS 工具，彌合了組件和樣式之間的差距，提供了許多功能，讓我們以功能性和可重用的方式啟動(dòng)和運(yùn)行樣式化組件。

其他出色的解決方案包括 Foundation、Bulma、Materialize 和 Ant Design。如果喜歡寫(xiě) Vanilla CSS，我們可以使用一些 CSS 擴(kuò)展語(yǔ)言，比如 SASS，來(lái)擴(kuò)展它的特性。

后端框架

7、Express

地址：https://www.npmjs.com/package/express

用于 Node.js 的快速、獨(dú)立、簡(jiǎn)約的 Web 框架。它相對(duì)較小，具有許多可用作插件的功能。通常被稱為 Node.js 的標(biāo)準(zhǔn)服務(wù)器框架。

8、Hapi

地址：https://www.npmjs.com/package/@hapi/hapi

Hapi 最初用于 Express 框架。使用 Hapi，我們可以構(gòu)建功能強(qiáng)大、可擴(kuò)展的應(yīng)用程序，而且開(kāi)銷(xiāo)最小，而且功能齊全，開(kāi)箱即用。

9、Sails?

地址：https://www.npmjs.com/package/sails

Sails 是 Node.js 最流行的 MVC 框架，支持現(xiàn)代應(yīng)用程序的要求：具有可擴(kuò)展、面向服務(wù)架構(gòu)的數(shù)據(jù)驅(qū)動(dòng) API。

與前端框架一樣，也有很多后端替代方案，例如 Adonis 和 Koa。選擇一個(gè)滿足您需求的工具，然后學(xué)習(xí)它。

CORS 和請(qǐng)求

10、Cors

地址：https://www.npmjs.com/package/cors

一個(gè)Node.js 中間件，用于提供 Connect/Express 中間件，可用于啟用具有各種選項(xiàng)的跨域資源共享。

11、Axios

地址：https://www.npmjs.com/package/axios

用于瀏覽器和 Node.js 的基于 Promise 的 HTTP 客戶端。與 JS 內(nèi)置的 Fetch API 相比，它易于設(shè)置、直觀且簡(jiǎn)化了很多東西。

12、Body-parser

地址：https://www.npmjs.com/package/body-parser

正文解析中間件，它提取傳入請(qǐng)求流的整個(gè)正文部分并將其公開(kāi)在 req.body 上，作為更易于交互的東西。

API 服務(wù)

13、Restify

地址：https://www.npmjs.com/package/restify

一個(gè) Node.js Web 服務(wù)框架，經(jīng)過(guò)優(yōu)化，可構(gòu)建語(yǔ)義正確的 RESTful Web 服務(wù)，以供大規(guī)模生產(chǎn)使用。Restify 針對(duì)自省和性能進(jìn)行了優(yōu)化。

14、GraphQL

地址：https://www.npmjs.com/package/graphql

API 的查詢語(yǔ)言和使用現(xiàn)有數(shù)據(jù)完成這些查詢的運(yùn)行時(shí)。提供 API 中數(shù)據(jù)的完整描述，讓客戶能夠準(zhǔn)確地詢問(wèn)他們需要什么。

Web sockets

15、Socket.io

地址：https://www.npmjs.com/package/socket.io

Socket.IO 支持實(shí)時(shí)、雙向和基于事件的通信。它適用于所有平臺(tái)、瀏覽器或設(shè)備，同樣注重可靠性和速度。

16、WS

地址：https://www.npmjs.com/package/ws

簡(jiǎn)單易用、快速且經(jīng)過(guò)全面測(cè)試的 WebSocket 客戶端和服務(wù)器實(shí)現(xiàn)。?

記錄器

17、Morgan

地址：https://www.npmjs.com/package/morgan

具體來(lái)說(shuō)，它是一個(gè) HTTP 請(qǐng)求記錄器，用于存儲(chǔ) HTTP 請(qǐng)求并讓我們簡(jiǎn)要了解應(yīng)用程序的使用方式以及可能存在的錯(cuò)誤。

18、Winston

地址：https://www.npmjs.com/package/winston

幾乎所有內(nèi)容的記錄器，支持多種運(yùn)輸方式。比 Morgan 存在的時(shí)間更長(zhǎng)，它還擁有更大的維護(hù)者社區(qū)和更多的下載量。

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

19、Mongoose?

地址：https://www.npmjs.com/package/mongoose

Mongoose 是一個(gè) MongoDB 對(duì)象建模工具，旨在在異步環(huán)境中工作。Mongoose 支持 Promise 和回調(diào)。

20、Sequelize?

地址：https://www.npmjs.com/package/sequelize

Sequelize 是一個(gè)基于 Promise 的 Node.js ORM，適用于 Postgres、MySQL、MariaDB、SQLite 和 Microsoft SQL Server。它具有可靠的事務(wù)支持、關(guān)系、急切和延遲加載、讀取復(fù)制等。

認(rèn)證工具

21、Passport

地址：https://www.npmjs.com/package/passport

Passport 的目的是通過(guò)稱為策略的可擴(kuò)展插件集對(duì)請(qǐng)求進(jìn)行身份驗(yàn)證。我們向 Passport 提供身份驗(yàn)證請(qǐng)求，而 Passport 提供掛鉤來(lái)控制身份驗(yàn)證成功或失敗時(shí)發(fā)生的情況。

22、Bcrypt

地址：https://www.npmjs.com/package/bcrypt

幫助我們散列密碼的庫(kù)。Bcrypt 是 Niels Provos 和 David Mazières 設(shè)計(jì)的密碼散列函數(shù)，基于 Blowfish 密碼并于 1999 年在 USENIX 上提出。

23、JSONWebToken

地址：https://www.npmjs.com/package/jsonwebtoken

JSON Web 令牌 (JWT) 是一種開(kāi)放的行業(yè)標(biāo)準(zhǔn) RFC 7519 方法，用于在兩方之間安全地表示聲明。這個(gè)包允許我們解碼、驗(yàn)證和生成 JWT。

?配置模塊

24、Config

地址：https://www.npmjs.com/package/config

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

25、Dotenv

地址：https://www.npmjs.com/package/dotenv

它一個(gè)零依賴模塊，將環(huán)境變量從 .env 文件加載到 process.env 中。

靜態(tài)網(wǎng)站生成器

26、Gatsby

地址：https://www.npmjs.com/package/gatsby

現(xiàn)代網(wǎng)站生成器，可創(chuàng)建快速、高質(zhì)量、動(dòng)態(tài)的 React 應(yīng)用程序，從博客到電子商務(wù)網(wǎng)站再到用戶儀表板。很棒的插件生態(tài)系統(tǒng)和模板。

27、NextJS

地址：https://www.npmjs.com/package/next

NextJS 首先支持服務(wù)器渲染以及靜態(tài)生成的內(nèi)容。我們還可以將無(wú)服務(wù)器函數(shù)定義為 API 端點(diǎn)。

28、NuxtJS

地址：https://www.npmjs.com/package/next

NuxtJS 基本上是 Vue 生態(tài)系統(tǒng)中的 NextJS 替代品。NuxtJS 的目標(biāo)是讓 Web 開(kāi)發(fā)功能強(qiáng)大且性能卓越。

模板語(yǔ)言

29、Mustache

地址：https://www.npmjs.com/package/mustache

Mustache 是一種無(wú)邏輯的模板語(yǔ)法。它可以用于 HTML、配置文件、源代碼——任何東西。它通過(guò)使用散列或?qū)ο笾刑峁┑闹禂U(kuò)展模板中的標(biāo)簽來(lái)工作。

30、Handlebars

地址：https://www.npmjs.com/package/handlebars

使用模板和輸入對(duì)象來(lái)生成 HTML 或其他文本格式。Handlebars 模板看起來(lái)像帶有嵌入式 Handlebars 表達(dá)式的常規(guī)文本。Handlebars 在很大程度上與 Mustache 模板兼容。

31、EJS

地址：https://www.npmjs.com/package/ejs

EJS 是一種簡(jiǎn)單的模板語(yǔ)言，可讓我們使用純 JavaScript 生成 HTML 標(biāo)記，語(yǔ)法簡(jiǎn)單、執(zhí)行速度快、調(diào)試方便。EJS 擁有龐大的活躍用戶社區(qū)，并且該庫(kù)正在積極開(kāi)發(fā)中。

圖像處理

32、Sharp

地址：https://www.npmjs.com/package/sharp

一個(gè)很棒的模塊，可以將常見(jiàn)格式的大圖像轉(zhuǎn)換為更小的、對(duì)網(wǎng)絡(luò)友好的 JPEG、PNG 和不同尺寸的 WebP 圖像。

33、GM

地址：https://www.npmjs.com/package/gm

借助 Node.js 模塊 GM，我們可以直接在代碼中使用兩種流行的工具來(lái)創(chuàng)建、編輯、合成和轉(zhuǎn)換圖像 - GraphicsMagick 和 ImageMagick。

34、Cloudinary

地址：https://www.npmjs.com/package/cloudinary

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

日期格式

35、DayJS

地址：https://www.npmjs.com/package/dayjs

DayJS 是 MomentJS 的快速輕量級(jí)替代品（自 2020 年 9 月起處于維護(hù)模式）。使用類(lèi)似的 API - 如果您使用過(guò) MomentJS，那肯定已經(jīng)知道如何使用大部分 DayJS。

36、Luxon

地址：https://www.npmjs.com/package/luxon

如果您喜歡另一種輕量級(jí)的替代方案，API 略有不同，那么 Luxon 可能是我們的正確選擇。

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

37、Shortid

地址：https://www.npmjs.com/package/shortid

它可以創(chuàng)建一個(gè)非常短的非順序的url?唯一id。它非常適合 url 縮短器、DB id 和任何其他 id。

38、Uuid

地址：https://www.npmjs.com/package/uuid

這個(gè)一個(gè)非常方便的微型包，可快速輕松地生成更復(fù)雜的通用唯一標(biāo)識(shí)符 (UUID)。

39、Faker

地址：https://www.npmjs.com/package/faker

用于在瀏覽器和 Node.js 中生成大量虛假數(shù)據(jù)的有用包。

驗(yàn)證者

40、Validator

地址：https://www.npmjs.com/package/validator

這是一個(gè)非常方便的字符串驗(yàn)證器庫(kù)。它有許多有用的方法，可以便于我們快速使用，例如 isEmail()、isCreditCard()、isDate() 和 isURL()。

41、Joi

地址：https://www.npmjs.com/package/joi

它是一個(gè)強(qiáng)大的 JavaScript 模式，描述語(yǔ)言和數(shù)據(jù)驗(yàn)證器。

表格和電子郵件

42、Formik

地址：https://www.npmjs.com/package/formik

Formik 是一個(gè)流行的 React 和 React Native 開(kāi)源表單庫(kù)。它易于使用、聲明性和自適應(yīng)性。

43、Multer?

地址：https://www.npmjs.com/package/multer

Multer 是一個(gè)用于處理 multipart/form-data 的 Node.js 中間件，主要用于上傳文件。

44、Nodemailer

地址：https://www.npmjs.com/package/nodemailer

Nodemailer 是 Node.js 應(yīng)用程序的一個(gè)模塊，可以輕松發(fā)送電子郵件。該項(xiàng)目早在 2010 年就開(kāi)始了，今天它是大多數(shù) Node.js 用戶默認(rèn)使用的解決方案。

測(cè)試

45、Jest

地址：https://www.npmjs.com/package/jest

Jest 是一個(gè)令人愉快的 JavaScript 測(cè)試框架，專注于簡(jiǎn)單性。它允許我們使用平易近人、熟悉且功能豐富的 API 編寫(xiě)測(cè)試，從而快速為我們提供結(jié)果。

46、Mocha

地址：https://www.npmjs.com/package/mocha

Mocha 是一個(gè) JavaScript 測(cè)試框架，讓異步測(cè)試變得簡(jiǎn)單有趣。Mocha 測(cè)試連續(xù)運(yùn)行，允許靈活準(zhǔn)確的報(bào)告，同時(shí)，將未捕獲的異常映射到正確的測(cè)試用例。

網(wǎng)頁(yè)抓取和自動(dòng)化

47、Cheerio

地址：https://www.npmjs.com/package/cheerio

Cheerio 廣泛用于網(wǎng)絡(luò)抓取工作，有時(shí)還用于自動(dòng)化任務(wù)。它基于 jquery 非常快速和快速。Cheerio 封裝了 Parse5 解析器，能夠解析任何類(lèi)型的 HTML 和 XML 文檔。

48、Puppeteer

地址：https://www.npmjs.com/package/puppeteer

Puppeteer 廣泛用于自動(dòng)執(zhí)行瀏覽器任務(wù)，并且只能與 google chrome 瀏覽器（即 chromium）一起使用。Puppeteer 也可用于網(wǎng)頁(yè)抓取任務(wù)。與 Cheerio 模塊相比，它功能強(qiáng)大且功能豐富。

Linters 和格式化程序

49、ESLint

地址：https://www.npmjs.com/package/eslint

ESLint 是一種用于識(shí)別和報(bào)告在 ECMAScript/JavaScript 代碼中發(fā)現(xiàn)的模式的工具。ESLint 是完全可插拔的，每一條規(guī)則都是一個(gè)插件，我們可以在運(yùn)行時(shí)添加更多。

50、Prettier

地址：https://www.npmjs.com/package/prettier

Prettier 是一個(gè)固執(zhí)己見(jiàn)的代碼格式化程序。它通過(guò)解析您的代碼并使用自己的規(guī)則重新打印它來(lái)執(zhí)行一致的樣式，這些規(guī)則考慮了最大行長(zhǎng)度，并在必要時(shí)包裝代碼。

模塊打包器和最小化器

51、Webpack

地址：https://www.npmjs.com/package/webpack

著名且功能強(qiáng)大的模塊捆綁器。它的主要目的是捆綁 JavaScript 文件以在瀏覽器中使用，但它也能夠轉(zhuǎn)換、捆綁或打包幾乎任何資源或資產(chǎn)。

52、HTML-Minifier

地址：https://www.npmjs.com/package/html-minifier

輕量級(jí)、高度可配置且經(jīng)過(guò)良好測(cè)試的基于 Javascript 的 HTML 壓縮器/壓縮器（支持 Node.js）。

53、Clean-CSS

地址：https://www.npmjs.com/package/clean-css

適用于 Node.js 平臺(tái)和任何現(xiàn)代瀏覽器的快速高效的 CSS 優(yōu)化器。高度可配置和許多兼容模式。

54、UglifyJS2

地址：https://www.npmjs.com/package/uglify-js

JavaScript 解析器、壓縮器、壓縮器和美化工具包。它可以接受多個(gè)輸入文件并支持許多配置選項(xiàng)。

流程管理器和運(yùn)行器

55、Nodemon

地址：https://www.npmjs.com/package/nodemon

用于開(kāi)發(fā) Node.js 應(yīng)用程序的簡(jiǎn)單監(jiān)控腳本。對(duì)開(kāi)發(fā)很有用，因?yàn)樗浅Ｈ菀字匦聠?dòng)，并且默認(rèn)啟用和烘焙文件監(jiān)視。

56、PM2

地址：https://www.npmjs.com/package/pm2

帶有內(nèi)置負(fù)載均衡器的 Node.JS 應(yīng)用程序的生產(chǎn)流程管理器。更全面，更適合生產(chǎn)。為我們提供許多參數(shù)來(lái)調(diào)整/采取行動(dòng)。

57、Concurrently

地址：https://www.npmjs.com/package/concurrently

簡(jiǎn)單直接 - 用于同時(shí)運(yùn)行多個(gè)命令的有用工具。

CLI 和調(diào)試器

58、Commander

地址：https://www.npmjs.com/package/commander

提供流暢的 API 用于定義 CLI 應(yīng)用程序的各個(gè)方面，例如命令、選項(xiàng)、別名和幫助。簡(jiǎn)化命令行應(yīng)用程序的創(chuàng)建。

59、Inquirer

地址：https://www.npmjs.com/package/inquirer

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

60、Chalk

地址：https://www.npmjs.com/package/chalk

Chalk 是一個(gè)非常簡(jiǎn)單的庫(kù)，創(chuàng)建一個(gè)簡(jiǎn)單的目的 - 為我們的終端字符串設(shè)置樣式。

61、Debug

地址：https://www.npmjs.com/package/debug

一個(gè)小型的 JavaScript 調(diào)試工具。只需將模塊名稱傳遞給函數(shù)，它就會(huì)返回console.error 的修飾版本，供我們傳遞調(diào)試語(yǔ)句。

實(shí)用程序

62、Lodash

地址：https://www.npmjs.com/package/lodash

提供模塊化、性能和附加功能的現(xiàn)代 JavaScript 實(shí)用程序庫(kù)。在 JavaScript 數(shù)組、對(duì)象和其他數(shù)據(jù)結(jié)構(gòu)上公開(kāi)了許多有用的方法。

63、Underscore

地址：https://www.npmjs.com/package/underscore

Underscore 提供了許多常用的函數(shù)助手以及更專業(yè)的好東西：函數(shù)綁定、javascript 模板、創(chuàng)建快速索引、深度相等測(cè)試等。

64、Async

地址：https://www.npmjs.com/package/async

Async 是一個(gè)實(shí)用模塊，它為使用異步 JavaScript 提供了直接、強(qiáng)大的功能。

系統(tǒng)模塊

65、Fs-extra

地址：https://www.npmjs.com/package/fs-extra

Fs-extra 包含原版 Node.js fs 包中未包含的方法，例如 copy()、remove()、mkdirs()。

66、Node-dir

地址：https://www.npmjs.com/package/node-dir

用于一些常見(jiàn)目錄和文件操作的模塊，包括用于獲取文件數(shù)組、子目錄以及讀取和處理文件內(nèi)容的方法。

67、Node-cache

地址：https://www.npmjs.com/package/node-cache

一個(gè)簡(jiǎn)單的緩存模塊，具有設(shè)置、獲取和刪除方法，工作方式有點(diǎn)像 memcached。密鑰可以有一個(gè)超時(shí) (ttl)，之后它們就會(huì)過(guò)期并從緩存中刪除。

其他

68、Helmet

地址：https://www.npmjs.com/package/helmet

通過(guò)設(shè)置各種 HTTP 標(biāo)頭來(lái)幫助我們保護(hù)我們的應(yīng)用程序。它是 Connect 風(fēng)格的中間件，與 Express 等框架兼容。

69、PDFKit

地址：https://www.npmjs.com/package/pdfkit

DFKit 是一個(gè)用于 Node 和瀏覽器的 PDF 文檔生成庫(kù)，可以輕松創(chuàng)建復(fù)雜的、多頁(yè)的、可打印的文檔。

70、CSV

地址：https://www.npmjs.com/package/csv

全面的 CSV 套件結(jié)合了 4 個(gè)經(jīng)過(guò)良好測(cè)試的包來(lái)生成、解析、轉(zhuǎn)換和字符串化 CSV 數(shù)據(jù)。

71、Marked

地址：https://www.npmjs.com/package/marked

用于解析 Markdown 的低級(jí)編譯器，無(wú)需長(zhǎng)時(shí)間緩存或阻塞。

72、Randomcolor

地址：https://www.npmjs.com/package/randomcolor

用于生成有吸引力的隨機(jī)顏色的小腳本。我們可以傳遞一個(gè)選項(xiàng)對(duì)象來(lái)影響它產(chǎn)生的顏色類(lèi)型。

73、Pluralize

地址：https://www.npmjs.com/package/pluralize

該模塊使用預(yù)先定義的規(guī)則列表，按順序應(yīng)用，以單數(shù)或復(fù)數(shù)給定的單詞。在很多情況下這很有用，例如，任何基于用戶輸入的自動(dòng)化。

本文完~

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)

分享 73 個(gè)讓你事半功倍的 NPM 包

學(xué)習(xí)更多技能請(qǐng)點(diǎn)擊下方公眾號(hào)

學(xué)習(xí)更多技能
請(qǐng)點(diǎn)擊下方公眾號(hào)