源碼群友問：你這么多項目是怎么進行技術選型的？

大家好，我是若川。最近組織了源碼共讀活動，感興趣的可以點此加我微信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?私信江西?拉你進群。