大家好，我是若川。最近組織了源碼共讀活動，感興趣的可以點此加我微信ruochuan12?進群參與，每周大家一起學習200行左右的源碼，共同進步。已進行4個月了，很多小伙伴表示收獲頗豐。

源碼群有群友提問我是怎么找到那么多npm包的，覺得這篇文章不錯，分享給大家。

---

假設我需要一個 React 的彈框組件，我應該如何快速選擇一個合適的 npm 庫？

一、搜索

在正確的網址進行搜索:

• npm 官網: 官方網站，權威網站

• yarn 官網

• Github

使用正確的關鍵詞進行搜索: react modal

如果不出所料，這里可以選出一個或多個比較合適的第三方庫。那對于一個選擇困難癥，如何從中挑選一個更好的庫呢？

npm search

二、選型

你有沒有參與過業務技術選型，你們是如何考慮技術選型的呢？這是工作了三五年的前端出去面試時經常會碰到的問題。

答：使用最流行的技術方案。最流行的技術方案往往擁有更豐富的生態與更多的從業人員，既方便找輪子，又好招人。

而最流行的技術方案指的是 「挑選下載量最高的庫，而非 Star 最高的庫」。當然這句話有些太絕對，但適用于大部分場景。

那還有一些小場景呢？再考慮幾個關鍵要素: PQM

P: 考察其流行度，周下載量多少，Github Stars 多少，是否無人問津

Q: 考察其質量性，是否含有測試、Type等

M: 考察其維護性，如最后一次更新時間，是否長時間未更新，如 Issues 的個數，是否有好多問題懸而未決

這里推薦一個選型必備網站: npm trends，它可以很直白地把這些指標放在一起進行對比，并且能夠推薦「與該 Package 所有相似的包」

npm trend

三、文檔

要多看文檔！

我向我女朋友強調了這點，她問我，那應該如何去找到它的文檔呢？

npmjs.com 某個庫詳情頁面的右側，有 Homepage 字段指向官方文檔

github.com 某個 repo 詳情頁面的右上角，有官網鏈接

如果以上兩者都沒有，那 Readme.md 就是文檔

其次，某個 package 的官網、Github 信息都會在 package.json 中聲明

{"homepage": "https://lodash.com/","repository": {"type": "git","url": "git+https://github.com/lodash/lodash.git"} }

接下來再送幾個小技巧

# 快速找到并打開 react 的文檔 $ npm docs react# 快速找到并打開 react 的倉庫 $ npm repo react

四、示例

文檔看完就進入了實操階段，可按照以下步驟學會使用該庫

• 文檔中的示例: 如 lodash及一眾較小體積的庫

• 倉庫中的示例: 如 redux、nextjs 與 koa

• 倉庫中的測試: 適用于一些邊界的示例

為了某一個待調研的庫，在本地新建一次性文件進行學習是一件不推薦的事情，以下三個工具幫你搞定所有的試驗性調研

• npm devtool: 在瀏覽器控制臺用以調試較小提交的庫，如 lodash/ms/joi 之類

• codesandbox: 用以調試 Vue/React 等周邊庫

• stackblitz: 用以調試 NodeJs 相關庫

五、源碼

# 快速找到并打開 react 的倉庫 $ npm repo react

把代碼下載到本地，去跑通、去運行、去測試、去調試。

最近組建了一個江西人的前端交流群，如果你是江西人可以加我微信?ruochuan12?私信 江西?拉你進群。

推薦閱讀

整整4個月了，盡全力組織了源碼共讀活動~
我歷時3年才寫了10余篇源碼文章，但收獲了100w+閱讀

老姚淺談：怎么學JavaScript？

我在阿里招前端，該怎么幫你（可進面試群）

·················?若川簡介?·················

你好，我是若川，畢業于江西高校。現在是一名前端開發“工程師”。寫有《學習源碼整體架構系列》10余篇，在知乎、掘金收獲超百萬閱讀。
從2014年起，每年都會寫一篇年度總結，已經寫了7篇，點擊查看年度總結。
同時，最近組織了源碼共讀活動，幫助1000+前端人學會看源碼。公眾號愿景：幫助5年內前端人走向前列。

識別上方二維碼加我微信、拉你進源碼共讀群

今日話題

略。分享、收藏、點贊、在看我的文章就是對我最大的支持~

總結

以上是生活随笔為你收集整理的源码群友问：你这么多项目是怎么进行技术选型的？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。