73 個(gè)非常棒的 NPM 包以提高工作效率web前端開發(fā)關(guān)注共 9117字，需瀏覽 19分鐘 ·2022-02-12 23:21 英文 | https://dev.to/madza/73-awesome-npm-packages-for-productivity-19p8翻譯 | 楊小愛在我們繁忙的日程和緊迫的項(xiàng)目期限內(nèi)，選擇能夠提高工作效率的工具，就顯得至關(guān)重要。在這里，我整理了一些我最喜歡的 NPM 包的列表。我還對(duì)它們進(jìn)行了分類，因此信息更加結(jié)構(gòu)化并且更易于瀏覽。當(dāng)然，我們不必全部安裝和學(xué)習(xí)它們。在大多數(shù)情況下，從每個(gè)類別中挑選一個(gè)兩個(gè)就足夠了。我想提供一些替代方案，以便我們能找到一些更好的工具。現(xiàn)在，我們就開始今天的內(nèi)容吧。前端框架1、React?地址：https://www.npmjs.com/package/reactReact 使用虛擬 DOM 將頁面的各個(gè)部分作為單獨(dú)的組件進(jìn)行管理，允許我們?cè)诓凰⑿抡麄€(gè)頁面的情況下刷新組件。通常與 React-dom 和 React-router-dom 一起使用。2、Vue地址：https://www.npmjs.com/package/vueVue 專注于使編寫 Web 應(yīng)用程序更快、更容易、更愉快的特性。它有很棒的文檔。通常與 Vue-router 和 Vuex 一起使用。3、Svelte?地址：https://www.npmjs.com/package/svelteSvelte 是一種構(gòu)建 Web 應(yīng)用程序的新方法。它是一個(gè)編譯器，它獲取你的聲明性組件并將它們轉(zhuǎn)換為高效的 JavaScript，從而通過手術(shù)方式更新 DOM。其他值得注意的框架包括 Angular、Ember、Backbone、Preact 等。你可以用它們中的任何一個(gè)來創(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 開發(fā)的低級(jí)、實(shí)用程序優(yōu)先的 CSS 框架。從頭開始構(gòu)建，可定制。6、Styled-components地址：https://www.npmjs.com/package/styled-componentsCSS-in-JS 工具，彌合了組件和樣式之間的差距，提供了許多功能，讓我們以功能性和可重用的方式啟動(dòng)和運(yùn)行樣式化組件。其他出色的解決方案包括 Foundation、Bulma、Materialize 和 Ant Design。如果喜歡寫 Vanilla CSS，我們可以使用一些 CSS 擴(kuò)展語言，比如 SASS，來擴(kuò)展它的特性。后端框架7、Express地址：https://www.npmjs.com/package/express用于 Node.js 的快速、獨(dú)立、簡約的 Web 框架。它相對(duì)較小，具有許多可用作插件的功能。通常被稱為 Node.js 的標(biāo)準(zhǔn)服務(wù)器框架。8、Hapi地址：https://www.npmjs.com/package/@hapi/hapiHapi 最初用于 Express 框架。使用 Hapi，我們可以構(gòu)建功能強(qiáng)大、可擴(kuò)展的應(yīng)用程序，而且開銷最小，而且功能齊全，開箱即用。9、Sails?地址：https://www.npmjs.com/package/sailsSails 是 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è)置、直觀且簡化了很多東西。12、Body-parser地址：https://www.npmjs.com/package/body-parser正文解析中間件，它提取傳入請(qǐng)求流的整個(gè)正文部分并將其公開在 req.body 上，作為更易于交互的東西。API 服務(wù)13、Restify地址：https://www.npmjs.com/package/restify一個(gè) Node.js Web 服務(wù)框架，經(jīng)過優(yōu)化，可構(gòu)建語義正確的 RESTful Web 服務(wù)，以供大規(guī)模生產(chǎn)使用。Restify 針對(duì)自省和性能進(jìn)行了優(yōu)化。14、GraphQL地址：https://www.npmjs.com/package/graphqlAPI 的查詢語言和使用現(xiàn)有數(shù)據(jù)完成這些查詢的運(yùn)行時(shí)。提供 API 中數(shù)據(jù)的完整描述，讓客戶能夠準(zhǔn)確地詢問他們需要什么。Web sockets15、Socket.io地址：https://www.npmjs.com/package/socket.ioSocket.IO 支持實(shí)時(shí)、雙向和基于事件的通信。它適用于所有平臺(tái)、瀏覽器或設(shè)備，同樣注重可靠性和速度。16、WS地址：https://www.npmjs.com/package/ws簡單易用、快速且經(jīng)過全面測試的 WebSocket 客戶端和服務(wù)器實(shí)現(xiàn)。?記錄器17、Morgan地址：https://www.npmjs.com/package/morgan具體來說，它是一個(gè) HTTP 請(qǐng)求記錄器，用于存儲(chǔ) HTTP 請(qǐng)求并讓我們簡要了解應(yīng)用程序的使用方式以及可能存在的錯(cuò)誤。18、Winston地址：https://www.npmjs.com/package/winston幾乎所有內(nèi)容的記錄器，支持多種運(yùn)輸方式。比 Morgan 存在的時(shí)間更長，它還擁有更大的維護(hù)者社區(qū)和更多的下載量。數(shù)據(jù)庫工具19、Mongoose?地址：https://www.npmjs.com/package/mongooseMongoose 是一個(gè) MongoDB 對(duì)象建模工具，旨在在異步環(huán)境中工作。Mongoose 支持 Promise 和回調(diào)。20、Sequelize?地址：https://www.npmjs.com/package/sequelizeSequelize 是一個(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/passportPassport 的目的是通過稱為策略的可擴(kuò)展插件集對(duì)請(qǐng)求進(jìn)行身份驗(yàn)證。我們向 Passport 提供身份驗(yàn)證請(qǐng)求，而 Passport 提供掛鉤來控制身份驗(yàn)證成功或失敗時(shí)發(fā)生的情況。22、Bcrypt地址：https://www.npmjs.com/package/bcrypt幫助我們散列密碼的庫。Bcrypt 是 Niels Provos 和 David Mazières 設(shè)計(jì)的密碼散列函數(shù)，基于 Blowfish 密碼并于 1999 年在 USENIX 上提出。23、JSONWebToken地址：https://www.npmjs.com/package/jsonwebtokenJSON Web 令牌 (JWT) 是一種開放的行業(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/nextNextJS 首先支持服務(wù)器渲染以及靜態(tài)生成的內(nèi)容。我們還可以將無服務(wù)器函數(shù)定義為 API 端點(diǎn)。28、NuxtJS地址：https://www.npmjs.com/package/nextNuxtJS 基本上是 Vue 生態(tài)系統(tǒng)中的 NextJS 替代品。NuxtJS 的目標(biāo)是讓 Web 開發(fā)功能強(qiáng)大且性能卓越。模板語言29、Mustache地址：https://www.npmjs.com/package/mustacheMustache 是一種無邏輯的模板語法。它可以用于 HTML、配置文件、源代碼——任何東西。它通過使用散列或?qū)ο笾刑峁┑闹禂U(kuò)展模板中的標(biāo)簽來工作。30、Handlebars地址：https://www.npmjs.com/package/handlebars使用模板和輸入對(duì)象來生成 HTML 或其他文本格式。Handlebars 模板看起來像帶有嵌入式 Handlebars 表達(dá)式的常規(guī)文本。Handlebars 在很大程度上與 Mustache 模板兼容。31、EJS地址：https://www.npmjs.com/package/ejsEJS 是一種簡單的模板語言，可讓我們使用純 JavaScript 生成 HTML 標(biāo)記，語法簡單、執(zhí)行速度快、調(diào)試方便。EJS 擁有龐大的活躍用戶社區(qū)，并且該庫正在積極開發(fā)中。圖像處理32、Sharp地址：https://www.npmjs.com/package/sharp一個(gè)很棒的模塊，可以將常見格式的大圖像轉(zhuǎn)換為更小的、對(duì)網(wǎng)絡(luò)友好的 JPEG、PNG 和不同尺寸的 WebP 圖像。33、GM地址：https://www.npmjs.com/package/gm借助 Node.js 模塊 GM，我們可以直接在代碼中使用兩種流行的工具來創(chuàng)建、編輯、合成和轉(zhuǎn)換圖像 - GraphicsMagick 和 ImageMagick。34、Cloudinary地址：https://www.npmjs.com/package/cloudinary專用模塊可簡化云服務(wù)的工作，為 Web 應(yīng)用程序的整個(gè)圖像管理管道提供解決方案。日期格式35、DayJS地址：https://www.npmjs.com/package/dayjsDayJS 是 MomentJS 的快速輕量級(jí)替代品（自 2020 年 9 月起處于維護(hù)模式）。使用類似的 API - 如果您使用過 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)證器庫。它有許多有用的方法，可以便于我們快速使用，例如 isEmail()、isCreditCard()、isDate() 和 isURL()。41、Joi地址：https://www.npmjs.com/package/joi它是一個(gè)強(qiáng)大的 JavaScript 模式，描述語言和數(shù)據(jù)驗(yàn)證器。表格和電子郵件42、Formik地址：https://www.npmjs.com/package/formikFormik 是一個(gè)流行的 React 和 React Native 開源表單庫。它易于使用、聲明性和自適應(yīng)性。43、Multer?地址：https://www.npmjs.com/package/multerMulter 是一個(gè)用于處理 multipart/form-data 的 Node.js 中間件，主要用于上傳文件。44、Nodemailer地址：https://www.npmjs.com/package/nodemailerNodemailer 是 Node.js 應(yīng)用程序的一個(gè)模塊，可以輕松發(fā)送電子郵件。該項(xiàng)目早在 2010 年就開始了，今天它是大多數(shù) Node.js 用戶默認(rèn)使用的解決方案。測試45、Jest地址：https://www.npmjs.com/package/jestJest 是一個(gè)令人愉快的 JavaScript 測試框架，專注于簡單性。它允許我們使用平易近人、熟悉且功能豐富的 API 編寫測試，從而快速為我們提供結(jié)果。46、Mocha地址：https://www.npmjs.com/package/mochaMocha 是一個(gè) JavaScript 測試框架，讓異步測試變得簡單有趣。Mocha 測試連續(xù)運(yùn)行，允許靈活準(zhǔn)確的報(bào)告，同時(shí)，將未捕獲的異常映射到正確的測試用例。網(wǎng)頁抓取和自動(dòng)化47、Cheerio地址：https://www.npmjs.com/package/cheerioCheerio 廣泛用于網(wǎng)絡(luò)抓取工作，有時(shí)還用于自動(dòng)化任務(wù)。它基于 jquery 非?？焖俸涂焖?。Cheerio 封裝了 Parse5 解析器，能夠解析任何類型的 HTML 和 XML 文檔。48、Puppeteer地址：https://www.npmjs.com/package/puppeteerPuppeteer 廣泛用于自動(dòng)執(zhí)行瀏覽器任務(wù)，并且只能與 google chrome 瀏覽器（即 chromium）一起使用。Puppeteer 也可用于網(wǎng)頁抓取任務(wù)。與 Cheerio 模塊相比，它功能強(qiáng)大且功能豐富。Linters 和格式化程序49、ESLint地址：https://www.npmjs.com/package/eslintESLint 是一種用于識(shí)別和報(bào)告在 ECMAScript/JavaScript 代碼中發(fā)現(xiàn)的模式的工具。ESLint 是完全可插拔的，每一條規(guī)則都是一個(gè)插件，我們可以在運(yùn)行時(shí)添加更多。50、Prettier地址：https://www.npmjs.com/package/prettierPrettier 是一個(gè)固執(zhí)己見的代碼格式化程序。它通過解析您的代碼并使用自己的規(guī)則重新打印它來執(zhí)行一致的樣式，這些規(guī)則考慮了最大行長度，并在必要時(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)過良好測試的基于 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-jsJavaScript 解析器、壓縮器、壓縮器和美化工具包。它可以接受多個(gè)輸入文件并支持許多配置選項(xiàng)。流程管理器和運(yùn)行器55、Nodemon地址：https://www.npmjs.com/package/nodemon用于開發(fā) Node.js 應(yīng)用程序的簡單監(jiān)控腳本。對(duì)開發(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ù)來調(diào)整/采取行動(dòng)。57、Concurrently地址：https://www.npmjs.com/package/concurrently簡單直接 - 用于同時(shí)運(yùn)行多個(gè)命令的有用工具。CLI 和調(diào)試器58、Commander地址：https://www.npmjs.com/package/commander提供流暢的 API 用于定義 CLI 應(yīng)用程序的各個(gè)方面，例如命令、選項(xiàng)、別名和幫助。簡化命令行應(yīng)用程序的創(chuàng)建。59、Inquirer地址：https://www.npmjs.com/package/inquirer用于 Node.js 的易于嵌入且美觀的命令行界面。提供很棒的查詢會(huì)話流程。60、Chalk地址：https://www.npmjs.com/package/chalkChalk 是一個(gè)非常簡單的庫，創(chuàng)建一個(gè)簡單的目的 - 為我們的終端字符串設(shè)置樣式。61、Debug地址：https://www.npmjs.com/package/debug一個(gè)小型的 JavaScript 調(diào)試工具。只需將模塊名稱傳遞給函數(shù)，它就會(huì)返回console.error 的修飾版本，供我們傳遞調(diào)試語句。實(shí)用程序62、Lodash地址：https://www.npmjs.com/package/lodash提供模塊化、性能和附加功能的現(xiàn)代 JavaScript 實(shí)用程序庫。在 JavaScript 數(shù)組、對(duì)象和其他數(shù)據(jù)結(jié)構(gòu)上公開了許多有用的方法。63、Underscore地址：https://www.npmjs.com/package/underscoreUnderscore 提供了許多常用的函數(shù)助手以及更專業(yè)的好東西：函數(shù)綁定、javascript 模板、創(chuàng)建快速索引、深度相等測試等。64、Async地址：https://www.npmjs.com/package/asyncAsync 是一個(gè)實(shí)用模塊，它為使用異步 JavaScript 提供了直接、強(qiáng)大的功能。系統(tǒng)模塊65、Fs-extra地址：https://www.npmjs.com/package/fs-extraFs-extra 包含原版 Node.js fs 包中未包含的方法，例如 copy()、remove()、mkdirs()。66、Node-dir地址：https://www.npmjs.com/package/node-dir用于一些常見目錄和文件操作的模塊，包括用于獲取文件數(shù)組、子目錄以及讀取和處理文件內(nèi)容的方法。67、Node-cache地址：https://www.npmjs.com/package/node-cache一個(gè)簡單的緩存模塊，具有設(shè)置、獲取和刪除方法，工作方式有點(diǎn)像 memcached。密鑰可以有一個(gè)超時(shí) (ttl)，之后它們就會(huì)過期并從緩存中刪除。其他68、Helmet地址：https://www.npmjs.com/package/helmet通過設(shè)置各種 HTTP 標(biāo)頭來幫助我們保護(hù)我們的應(yīng)用程序。它是 Connect 風(fēng)格的中間件，與 Express 等框架兼容。69、PDFKit地址：https://www.npmjs.com/package/pdfkitDFKit 是一個(gè)用于 Node 和瀏覽器的 PDF 文檔生成庫，可以輕松創(chuàng)建復(fù)雜的、多頁的、可打印的文檔。70、CSV地址：https://www.npmjs.com/package/csv全面的 CSV 套件結(jié)合了 4 個(gè)經(jīng)過良好測試的包來生成、解析、轉(zhuǎn)換和字符串化 CSV 數(shù)據(jù)。71、Marked地址：https://www.npmjs.com/package/marked用于解析 Markdown 的低級(jí)編譯器，無需長時(shí)間緩存或阻塞。72、Randomcolor地址：https://www.npmjs.com/package/randomcolor用于生成有吸引力的隨機(jī)顏色的小腳本。我們可以傳遞一個(gè)選項(xiàng)對(duì)象來影響它產(chǎn)生的顏色類型。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) 瀏覽 79點(diǎn)贊 評(píng)論 收藏 分享 手機(jī)掃一掃分享分享 舉報(bào) 評(píng)論圖片表情視頻評(píng)價(jià)全部評(píng)論推薦 分享 73 個(gè)讓你事半功倍的 NPM 包前端達(dá)人0yuri2webNode.js 的 npm 包簡介yuri2web是一個(gè)Node.js的npm包，提供了一個(gè)很簡單的針對(duì)web服務(wù)器的守護(hù)進(jìn)程解決yuri2webNode.js 的 npm 包簡介yuri2web是一個(gè)Node.js的npm包，提供了一個(gè)很簡單的針對(duì)web服務(wù)器的守護(hù)進(jìn)程解決方案。我為什么要用它？Node.js使用單核單進(jìn)程，這樣就會(huì)有CPU利用不足的問題，畢竟我們的服務(wù)器實(shí)例創(chuàng)建自己的npm包，發(fā)布npm包并使用SegmentFault0如何發(fā)布 npm 包全棧前端精選0npm & yarn 包管理機(jī)制前端Sharing0規(guī)范升級(jí) NPM 包前端Q0提高工作效率的音樂提高工作效率的音樂0發(fā)布npm包，你也可以的程序源代碼0前端工程化 - 剖析npm的包管理機(jī)制全棧前端精選0點(diǎn)贊 評(píng)論 收藏 分享 手機(jī)掃一掃分享分享 舉報(bào)
下載APP下載APP