推薦一些好用的JavaScript庫

2021-02-15 前端之巔

npm 模塊的規模和範圍是空前的,這也是 JavaScript 相對於其它程式語言的最大優勢之一。你對於 npm 模塊利用得越好,你就會成為一名更快更高產的開發人員。本文將介紹一些對於 NodeJS 和前端 JavaScript 開發價值非凡的通用模塊和工具,期望能夠對廣大讀者有所裨益。

本文所述僅代表作者個人觀點,主要聚焦於NodeJS 和前端 JavaScript 開發價值非凡的通用庫和工具。本文不會面面俱到,也不會包含任何特定用途的模塊,因為那種類型的列表雖然確實不錯但有點兒片面。

讓我們先來看看一些非常有用的命令行工具。

np - 一個更好的npm publish

如果你是一位 npm 模塊開發者,我強烈建議你檢出 np。因為它將版本衝突處理、添加 git 發布標記以及發布到 npm 的流程變得輕而易舉,特別是當你需要維護十來個以上模塊的時候。另外值得一提的是,Zeit 開發的 release 也是一個不錯的選擇。

yarn - 一個兼容 npm 的更好的包管理器。

儘管 npm v5 比之前版本快了很多,但我仍然認為 yarn 比 npm 更適合本地開發,因為 yarn 的速度和一致性更出色。無論使用哪種方式,你都是基於底層的同一個 npm 模塊庫,而且我個人認為,這兩者之間其實差不多,並沒有哪一個比另一個出色得多。你應該選擇最適合你的項目需求的包管理器。

我認為,在 2018 年,作為一名 JS 開發者,你最好同時熟悉npm和yarn,並且能夠在這兩者之間切換自如。

prettier - 一款偏執的代碼格式化工具。

Prettier 會解析你的代碼,然後按照它自己的規則重新列印你的代碼。它會根據最大行長度,在需要的時候進行換行。通過這樣,Prettier 可以強制使你的代碼風格保持一致。

我熱愛 eslint,也一直是 JavaScript Standard Style 的長期用戶。但是,像 prettier 和 gofmt 這樣的自動代碼格式化工具背後的理念具有無法抗拒的吸引力。

作為開發者,我們花費了太多時間和精力去操心代碼的風格樣式,而 prettier 則讓你減少在這方面的注意力,使你能夠專注於編寫什麼而不是如何編寫。

now - 非常簡單的部署工具。

考慮到簡單性、可靠性和功能集,Now 絕對是如今最好的免費部署系統。它對於測試靜態和動態發布非常有用,而且當你需要更多伺服器的時候,可以很好地擴展。你可以一直免費使用它,直到你需要擴展的時候才需要付費。

Node.js 和 JS 驅動的 Web 應用在它上面運行得非常好。另外,我還強烈推薦檢出 Zeit 提供的其它模塊,因為他們團隊是由一些社區最好的 JS 開發者組成的。

asciinema - 高質量終端會話的免費記錄工具。

可以查看我的上一篇博客《Making your Code Beautiful》(讓你的代碼更漂亮),詳細了解如何利用 asciinema 來生成高質量的代碼樣式和截屏。

這一節值得專門寫一篇完整的文章來進行介紹,尤其是現在,async & await 已經開始成為 JavaScript 並行編程的事實標準。

也就是說,如果你還沒有檢出 Sindre Sorhus 的 promise-fun 模塊,那麼我強烈推薦你檢出這個優秀的模塊。我對這些模塊唯一的抱怨是,它們好像不能在 create-react-app 和 rollup 之類的大部分前端工具鏈中開箱即用。

下面是一些最有用的模塊,它們支持 promise 和 async 風格的 Node 代碼:

pify - 將回調風格的函數 Promise 化。

有許多方法可以將函數從舊的回調方式轉變為 Promise 風格,但是我發現 pify 是其中最好用的。它很小,提供了一些不錯的細節,例如自動方法綁定,這在內置的 util.promisify 中是沒有的。

p-map - promise 並發管理。

並發很棒,但是大部分時候,無論是為了限制網絡帶寬或者計算資源,你都會想要設置一個實際的並行限制。p-map 在這方面非常突出。99% 的時候,我會用它來替代 Promise.all(...),因為 Promise.all(...) 不支持限制並行。

我在接觸 p-map 之前,自己創建了一個並行限制模塊 async-awiat-parallel,但我還是推薦你使用 p-map,因為它更好。😛

p-retry - 重試 promise 返回值函數或異步函數。

我一般用 p-retry 包裝所有 HTTP 請求和外部服務調用,給它們增加一層基本的健壯性。結合 p-map,你可以用可控的並行方式處理大批量的外部請求,而不需要太擔心偶然的傳輸錯誤、套接字掛斷或者伺服器超時。

p-timeout - 超過特定時間後使 promise 超時。

和 p-retry 一樣,p-timeout 通常是與第三方 API 和服務對接時,提高穩健性的必需模塊。你可以指定一個備選反饋,因為通常情況下,直接給出反饋比沒有明確時間提示的掛起等待或者等待超長時間之後才給出反饋要好得多。

p-cache 或者 p-memoize - 通過一個 LRU(Least Recently Used,最近最少使用)緩存來緩存異步函數結果。

許多這些 Promise 工具的目的,都給了我很多架構穩健微服務的啟發。在我的微服務架構中,每個外部依賴都可以被當作一個普通的接口,支持重試、超時、緩存、熔斷、回退等。

功能性的優雅降級通常比系統崩潰或者根本不響應更可取,因此,如果還不太熟悉微服務,可以檢出 p-cache 或 p-memoize,看看它們的設計決策是否也能夠幫助提升你的 Promise 處理能力。

有許多非常棒的網頁抓取工具,其中一些操作原始的 HTML,例如 cheerio;其中一些模擬了一個完整的瀏覽器環境,例如 puppeteer。你使用什麼工具取決於你的真實使用場景,因為用原始 HTML 更快也更輕量,而自動化一個無頭瀏覽器 (headless browser)雖然更穩健但也更笨重一些,不容易上手。

cheerio - 專門為伺服器端設計的快速、靈活、簡潔 的核心jQuery實現。

Cheerio 真的非常適合只想操作原始 HTML 的快速混雜的網頁抓取。它提供了一個穩健的類 jQuery 語法用來遍歷並操作 HTML 文檔。Cheerio 配合 request-promise-native 抓取遠程 HTML 文檔特別好用。

puppeteer - Chrome 無頭瀏覽器的 Node API。

和 cheerio 不一樣,puppeteer 是一個用來自動化 chrome 無頭瀏覽器實例的包裝器,非常適合現代的 JS 單頁應用。因為你就是在用 Chrome 本身,它對於解析、渲染和腳本執行的一致性支持非常棒。Chrome 無頭瀏覽器相對來說還比較新,但是它很可能會在接下來的幾年裡逐步淘汰較老的方案,例如 PhantomJS。

如果你需要持續抓取網站,自動化基於 Web 的工作流,或者捕捉截圖,puppeteer 是一個明顯的贏家,它會逐漸變得更受歡迎。

dotenv-safe - 從.env文件加載環境變量並確保它們都生效。

這個庫繼承了非常受歡迎的 dotenv 庫,通過一個.evn.example文件來強制所需的環境變量文件。像原來的 dotenv 模塊一樣,它提供了針對 Node 的快速、安全和穩健的環境變量支持。

它還可以通過在 now.json 中配置"dotenv": true來很好地與 Zeit 的 now.sh 部署腳本配合使用。

request 和 request-promise-native - 簡化的 HTTP 請求客戶端。

發起 HTTP 請求是一個非常普遍的操作,我的庫使用的是 request-promise-native,它用原生的 ES6 promise 包裝了原來的 request 模塊。95% 的時候,我都會 await promise 化的 HTTP 請求結果。其餘 5% 的時候,我會直接使用響應流,在這種情況下,我使用底層的 request 模塊,而不需要 Promise 支持。

通常情況下,為了穩健性,我會用 p-retry、p-timeout 和 p-cache 來一起包裝 request-promise-native 調用。

另外值得一提的是,支持 promise 的 got 也可以作為 request 的一個比較新的備選模塊,儘管我個人還沒怎麼用過這個模塊。

const request = require('request-promise-native')const html = await request('https://github.com')console.log(html)

這是用 request-promise-native 下載 HTML 文檔的一個例子

consolidate - 針對 Node 的模板引擎統一庫。

Consolidate 用來處理任何類型的後端模版(郵件、推特、原始 HTML 等)非常棒。我通常選擇 handlebars 作為我的模版引擎,但是無論怎樣,我總會用 consolidate 包裝我的模版用例,因為它提供了一種簡單一致的模版構建接口,而無論你在底層決定使用的是哪種模板引擎。

例如,我在 create-react-library 中使用 consolidate,來用這個庫相關的變量渲染 boilerplate 模板。

execa - 一個更好用的child_process。

如果你想要運行一個 shell 命令或者生成一個子進程,execa 會非常好用。

fs-extra - 一個更好的fs(文件流模塊),擁有額外的方法和 Promise 支持。

我發覺自己很少直接使用fs了。試過fs-extra後,你就再也不會回過頭用 fs 了。

D3(Data-Driven Documents,數據驅動文檔)是一個流行的用於數據可視化和動畫渲染的前端庫。它還包含一些非常棒的用於常見數學運算的單獨包,我一直都選擇用它們而不是其它可選模塊。

d3-random - 從各種分布中生成隨機數字。

當Math.random不好使的時候,試一試 d3-random 吧。它為各種常見分布提供了樣例,包括均勻分布、正態分布和指數分布。

d3-ease - 流暢的動畫功能。

d3-interpolate - 插入數字、顏色、字符串、數組、對象等任何東西!

這個庫提供了各種插入方法,用於在任意兩個值之間混入其它值。這些值可能是數字、顏色、字符串、數組或者深層嵌套的對象。

ava - 傑出的 JS 測試運行框架。

我使用的 Node.js 單元測試運行框架,是由 Sindre Sorhus 創建的另外一個工具。Ava 是一款比較新的測試運行框架,吸收了 mocha、tape、chai 和其它 JS 測試運行框架的優點,然後將所有這些優點拼在一起,形成一個非常棒的項目,並且配置了必要的默認值,可以讓它「剛剛好能夠工作」。

值得一提的是,Ava 的測試任務默認是並行運行的。針對一些使用場景,例如數據測試,單元測試的順序可能非常重要,你可以在文件級別關閉這個功能。

nock - 一個 HTTP 模擬庫

Nock 非常適合那些孤立地執行 HTTP 請求的測試模塊。如果你的 Node 模塊會發起 HTTP 請求,而你想要提供適當的單元測試,那麼 nock 是個不錯的選擇。

sinon - 一個 JS 測試庫

Sinon 是一個非常有用的工具庫,利用依賴注入來編寫孤立的測試。每個 Node 開發者都應該掌握這個工具。

我期望這篇分析文章能夠對你有所幫助,即使它只是讓你了解到一個你之前沒有聽說過的好用的模塊。我知道許多經驗豐富的有志向的開發者,會針對常見問題提出他們自己的解決方案。但是有些時候,如果已經有一些優秀的方案,使用這些方案而不是不斷重造輪子,也是不錯的。

NPM 庫的規模和範圍是空前的,而且我個人認為,這是 JavaScript 相比於其它程式語言的最大優勢之一。你對 npm 庫利用得越好,你就會成為一名更快更高產的開發人員。類似這樣的高階「軟」技能,是傳說中的 10x 程式設計師的特徵之一。

有哪些你喜愛的 npm 庫,我漏掉了嗎?在評論中分享你喜愛的庫,讓我知道吧!

https://hackernoon.com/javascipt-modules-worth-using-9aa7301e41ac

「前端之巔」是 InfoQ 旗下關注大前端技術的垂直社群。緊跟時代潮流,共享一線技術,歡迎關注。

PWA、Web 框架、UI 與動畫、Node... 大前端的下一站在哪裡?前端工程師的價值和成長路徑是什麼?GMTC2018 上,來自 Google、Facebook、BAT 等 60+ 國內外一線前端大牛,將與你面對面探討大前端領域最新技術趨勢和實踐,想要升職加薪就快來吧!掃描下方二維碼或點擊「閱讀原文」了解更多大會詳情!

目前大會 8 折熱銷中,團購更優惠,購票諮詢:18514549229(同微信)

相關焦點

  • 9 個出色的 JavaScript 庫推薦
    對於前端開發人員來說,那些流行的庫是非常有用的——它們為你的應用程式帶來了開箱即用的強大功能。這篇文章就推薦一些最出色的 JS 庫。  Algolia Places 是一個 JavaScript 位置庫,可以用在表單自動完成組件裡。我最近在我的一個項目裡使用了這個庫,它的性能表現給我留下了深刻印象。你可以使用這個 API 替代 Google Places API。
  • 前端高效開發不得不知道的一些JavaScript庫!
    函數庫lodash推薦指數:⭐️⭐️⭐️⭐️⭐️Lodash 是一個一致性、模塊化、高性能的 JavaScript 實用工具庫。地址:https://www.lodashjs.com/請求庫 axios推薦指數:⭐️⭐️⭐️⭐️⭐️是一個基於 promise 的 HTTP 庫,可以用在瀏覽器和 node.js 中。
  • 推薦15個 JavaScript 和 CSS 庫
    英文: Georgi Georgiev   譯文:為之漫筆/眾成翻譯zcfy.cc/article/15-interesting-javascript-and-css-libraries-for-january
  • 推薦10個最好的Javascript和CSS庫
    2.AOS AOS是一個CSS庫,允許您添加滾動動畫效果。 該庫是高度可定製的,非常小,易於使用,用CDN安裝即可,最重要的是性能良好。在用HTML創建你的3D世界之後,A-frame將把它分成兩個屏幕,兩個屏幕的視角稍有不同,可以享受VR的樂趣。
  • 2019年最好用的JavaScript圖表庫
    我們可以在 JS 開發中使用許多 JavaScript 圖表庫實現這些目標。市面上有很多 JavaScript 圖表庫,本文則列出了其中的幾款佼佼者,可以用在你的新項目中。以下就是 2019 年的頂級 Javascript 圖表庫名單。
  • 10個很棒的 JavaScript 庫
    /8-great-javascript-libraries-for-productivity-10eee7d8faee翻譯 | 楊小二Javascript現在已經演變成一種你可以做任何事情的語言。這是我以前用於不同項目的一些很棒的JS庫的列表。1、Nodemon地址:https://www.npmjs.com/package/nodemonNodemon 是一個可以實現伺服器開發的庫。任何更改後,它將自動保存,自動重新啟動的伺服器(或其他項目)。
  • 分享10個很棒的JavaScript 庫
    作為最好的動畫庫之一,Anime.js 靈活且易於使用。它可以幫助你的項目添加一些非常酷的動畫。作為開發人員,擁有一個好的開發組合很重要。人們對你的組合的第一印象有助於決定他們是否會僱用你。還有什麼比這個庫更好的工具可以為你的投資組合帶來活力。它不僅可以增強你的網站,還有助於展示實際技能。Codepen演示地址:https://codepen.io/lelouchb/pen/XWXoboE
  • 推薦一些能提高生產力的 Python 庫
    ,其意就是想了解下有哪些非常好用的提高生產力的 Python 庫。一些回答直接把 awesome-python 貼過來,點讚非常多,當然多歸多,但是裡面很多都是些過期的或者其實沒太有什麼價值的庫,反而會增加了挑選庫的成本。我大體上把一些回答過了一遍,另外結合自己平時了解的內容,稍微對一些基礎生產力庫做了簡單的梳理,在這裡分享給大家。
  • JavaScript 即未來:介紹 14 個 JavaScript 的框架和庫
    不論你是一個 JavaScript 新手還是一個資深的 JavaScript 開發者,使用框架和庫都能極大提高你的工作效率。好了,讓我們開始吧!1. Angular.jsAngular.js[5] 是目前最熱門的 JavaScript 框架之一。它用於開發者構建複雜的 web 應用。Angular.js 背後的思想是它的單頁應用 model。
  • ​JavaScript熱門庫
    3,Chart.js中文網:http://chartjs.cnGitHub地址:https://github.com/nnnick/Chart.js使用HTML5 Canvas元素的Javascript圖形庫,支持6種統計圖形,不依賴其他庫。
  • 給 Mac 新手推薦的一些好用的軟體
    這是一條來自 @Easy 同學的微博,他推薦了一些適合於 Mac 新手,並且價格便宜,又或者免費的軟體。
  • 2015年10個最佳Web開發JavaScript庫
    該平臺包含的一些核心庫集,可用於構建JavaScript的國際化內置插件和行業內廣泛認可的國際化標準。FormatJS已具備了共同模板和庫的集成套組。你可以用流程來控制工具——啟動、停止和刪除動畫,甚至是創建任何基於事件的東西。
  • 「開源項目」8款最受歡迎的地圖API和javascript庫
    有許多不同的庫和插件可供地圖使用,有的是付費的,有的是開源的。谷歌地圖並不是地圖應用程式的最佳有效解決方案。它不提供任何定製選項,使其更方便您自己。如果您想用自己的功能實現它,就必須在市場上使用開放源碼。在本文中,我們將看到不同的地圖都包含用於使用地圖庫的JavaScript工具。
  • 31個很棒的JavaScript庫
    /31-awesome-javascript-libraries-c8bdd78ed1dc翻譯 | web前端開發現在,NPM充滿了從小型到大型,從有用到有趣,從偉大到驚人的軟體包。請你花些時間將這些庫添加到你的書籤中,以便以後使用它們或者現在使用也可以。我希望你可以從中學習到一些新的庫。你可以ctrl+f在列表中搜索,搜索任何你需要的庫或包類型。我將盡力在說明中為每個庫包括某種通用類別。1、ChalkChalk是一個終端樣式庫。
  • 新JavaScript庫的激動人心之處
    近期在GitHub上出現了大量新的JavaScript庫,我們要來看一下其中非常棒的一些庫。
  • 25 個超棒的 HTML5 & JavaScript 遊戲引擎開發庫
    5) Akihabara  Akihabara是一個html5遊戲引擎,同樣也是一組用javascript創建運行在瀏覽器中的不依賴falsh技術的馬賽克風格的8/16位遊戲的庫和工具。  9) Gamejs  GameJs是一個基於HTML canvas元素的輕量級庫。特別值得一提的是,它的繪畫函數為遊戲開發者提供各種各樣的有用模塊,並且還在不斷擴充之中。
  • 9個你應該知道的頂級JavaScript庫
    英文 | https://medium.com/better-programming/top-javascript-libraries-you-should-know-about
  • 「沙裡淘金」精選瀏覽器端JavaScript庫資源推薦
    mori - 一個庫,用於使用ClojureScript的持久數據結構,並從舒適的vanilla JavaScript中支持API。存儲桶 - 用JavaScript編寫的完整,經過全面測試和記錄的數據結構庫。hashmap - 支持任何類型密鑰的簡單hashmap實現。日期日期庫。
  • 2020年11個熱門JavaScript 庫
    作者:祈澈菇涼https://www.jianshu.com/p/720fce4bbb73web前端開發人員經常會用到一些現成的js庫(框架)。3:Chart.jsstar:48.7k中文網:http://chartjs.cnGitHub地址:https://github.com/nnnick/Chart.js使用HTML5 Canvas元素的Javascript圖形庫,支持6種統計圖形,不依賴其他庫。
  • 6 個常用的 JavaScript PDF 生成庫
    評估要點評估結果在Node和瀏覽器上工作△(使用Webpack時要小心)輸入○(絕對輸入)自定義字體△(需要自己構建)易用性○官方網站:http://pdfmake.org/3. jsPDFjsPDF在GitHub的pdf庫中啟動次數最多,這並非偶然,因為它非常穩定且維護良好。