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

翻譯 | 楊小愛

在我們繁忙的日程和緊迫的項目期限內，選擇能夠提高工作效率的工具，就顯得至關重要。

在這里，我整理了一些我最喜歡的 NPM 包的列表。我還對它們進行了分類，因此信息更加結構化并且更易于瀏覽。

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

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

前端框架

1、React?

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

React 使用虛擬 DOM 將頁面的各個部分作為單獨的組件進行管理，允許我們在不刷新整個頁面的情況下刷新組件。通常與 React-dom 和 React-router-dom 一起使用。

2、Vue

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

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

3、Svelte?

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

Svelte 是一種構建 Web 應用程序的新方法。它是一個編譯器，它獲取你的聲明性組件并將它們轉換為高效的 JavaScript，從而通過手術方式更新 DOM。

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

樣式框架

4、Bootstrap

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

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

5、Tailwind

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

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

6、Styled-components

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

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

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

后端框架

7、Express

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

用于 Node.js 的快速、獨立、簡約的 Web 框架。它相對較小，具有許多可用作插件的功能。通常被稱為 Node.js 的標準服務器框架。

8、Hapi

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

Hapi 最初用于 Express 框架。使用 Hapi，我們可以構建功能強大、可擴展的應用程序，而且開銷最小，而且功能齊全，開箱即用。

9、Sails?

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

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

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

CORS 和請求

10、Cors

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

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

11、Axios

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

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

12、Body-parser

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

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

API 服務

13、Restify

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

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

14、GraphQL

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

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

Web sockets

15、Socket.io

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

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

16、WS

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

簡單易用、快速且經過全面測試的 WebSocket 客戶端和服務器實現(xiàn)。?

記錄器

17、Morgan

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

具體來說，它是一個 HTTP 請求記錄器，用于存儲 HTTP 請求并讓我們簡要了解應用程序的使用方式以及可能存在的錯誤。

18、Winston

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

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

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

19、Mongoose?

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

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

20、Sequelize?

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

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

認證工具

21、Passport

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

Passport 的目的是通過稱為策略的可擴展插件集對請求進行身份驗證。我們向 Passport 提供身份驗證請求，而 Passport 提供掛鉤來控制身份驗證成功或失敗時發(fā)生的情況。

22、Bcrypt

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

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

23、JSONWebToken

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

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

?配置模塊

24、Config

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

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

25、Dotenv

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

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

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

26、Gatsby

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

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

27、NextJS

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

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

28、NuxtJS

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

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

模板語言

29、Mustache

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

Mustache 是一種無邏輯的模板語法。它可以用于 HTML、配置文件、源代碼——任何東西。它通過使用散列或對象中提供的值擴展模板中的標簽來工作。

30、Handlebars

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

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

31、EJS

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

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

圖像處理

32、Sharp

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

一個很棒的模塊，可以將常見格式的大圖像轉換為更小的、對網絡友好的 JPEG、PNG 和不同尺寸的 WebP 圖像。

33、GM

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

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

34、Cloudinary

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

專用模塊可簡化云服務的工作，為 Web 應用程序的整個圖像管理管道提供解決方案。

日期格式

35、DayJS

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

DayJS 是 MomentJS 的快速輕量級替代品（自 2020 年 9 月起處于維護模式）。使用類似的 API - 如果您使用過 MomentJS，那肯定已經知道如何使用大部分 DayJS。

36、Luxon

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

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

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

37、Shortid

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

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

38、Uuid

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

這個一個非常方便的微型包，可快速輕松地生成更復雜的通用唯一標識符 (UUID)。

39、Faker

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

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

驗證者

40、Validator

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

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

41、Joi

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

它是一個強大的 JavaScript 模式，描述語言和數(shù)據(jù)驗證器。

表格和電子郵件

42、Formik

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

Formik 是一個流行的 React 和 React Native 開源表單庫。它易于使用、聲明性和自適應性。

43、Multer?

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

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

44、Nodemailer

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

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

測試

45、Jest

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

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

46、Mocha

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

Mocha 是一個 JavaScript 測試框架，讓異步測試變得簡單有趣。Mocha 測試連續(xù)運行，允許靈活準確的報告，同時，將未捕獲的異常映射到正確的測試用例。

網頁抓取和自動化

47、Cheerio

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

Cheerio 廣泛用于網絡抓取工作，有時還用于自動化任務。它基于 jquery 非?？焖俸涂焖?。Cheerio 封裝了 Parse5 解析器，能夠解析任何類型的 HTML 和 XML 文檔。

48、Puppeteer

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

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

Linters 和格式化程序

49、ESLint

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

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

50、Prettier

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

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

模塊打包器和最小化器

51、Webpack

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

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

52、HTML-Minifier

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

輕量級、高度可配置且經過良好測試的基于 Javascript 的 HTML 壓縮器/壓縮器（支持 Node.js）。

53、Clean-CSS

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

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

54、UglifyJS2

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

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

流程管理器和運行器

55、Nodemon

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

用于開發(fā) Node.js 應用程序的簡單監(jiān)控腳本。對開發(fā)很有用，因為它非常容易重新啟動，并且默認啟用和烘焙文件監(jiān)視。

56、PM2

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

帶有內置負載均衡器的 Node.JS 應用程序的生產流程管理器。更全面，更適合生產。為我們提供許多參數(shù)來調整/采取行動。

57、Concurrently

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

簡單直接 - 用于同時運行多個命令的有用工具。

CLI 和調試器

58、Commander

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

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

59、Inquirer

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

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

60、Chalk

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

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

61、Debug

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

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

實用程序

62、Lodash

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

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

63、Underscore

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

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

64、Async

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

Async 是一個實用模塊，它為使用異步 JavaScript 提供了直接、強大的功能。

系統(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

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

67、Node-cache

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

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

其他

68、Helmet

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

通過設置各種 HTTP 標頭來幫助我們保護我們的應用程序。它是 Connect 風格的中間件，與 Express 等框架兼容。

69、PDFKit

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

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

70、CSV

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

全面的 CSV 套件結合了 4 個經過良好測試的包來生成、解析、轉換和字符串化 CSV 數(shù)據(jù)。

71、Marked

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

用于解析 Markdown 的低級編譯器，無需長時間緩存或阻塞。

72、Randomcolor

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

用于生成有吸引力的隨機顏色的小腳本。我們可以傳遞一個選項對象來影響它產生的顏色類型。

73、Pluralize

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

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

本文完~

學習更多技能

請點擊下方公眾號