>[success] # npm -- install 安裝流程 ~~~ 1.npm install 執行之后，首先，檢查并獲取 npm 配置，這里的優先級為：項目級的 .npmrc 文件 > 用戶級的 .npmrc 文件> 全局級的 .npmrc 文件 > npm 內置的 .npmrc 文件。然后檢查項目中是否有 package-lock.json 文件。 ~~~ * 無 lock 文件： * 從 npm 遠程倉庫獲取包信息 * 根據 package.json 構建依賴樹，構建過程： * 構建依賴樹時，不管其是直接依賴還是子依賴的依賴，優先將其放置在 node\_modules 根目錄。 * 當遇到相同模塊時，判斷已放置在依賴樹的模塊版本是否符合新模塊的版本范圍，如果符合則跳過，不符合則在當前模塊的 node\_modules 下放置該模塊。 * 注意這一步只是確定邏輯上的依賴樹，并非真正的安裝，后面會根據這個依賴結構去下載或拿到緩存中的依賴包 * 在緩存中依次查找依賴樹中的每個包 * 不存在緩存： * 從 npm 遠程倉庫下載包 * 校驗包的完整性 * 校驗不通過： 重新下載 * 校驗通過： * 將下載的包復制到 npm 緩存目錄 * 將下載的包按照依賴結構解壓到 node\_modules * 存在緩存： * 將緩存按照依賴結構解壓到 node\_modules * 將包解壓到 node\_modules * 生成 lock 文件 * 如圖  >[info] ## 什么是.npmrc ~~~ 1.'.npmrc文件'，就是npm的配置文件。修改配置文件 -- 'npm config edit',在彈出的界面 上，修改.npmrc文件后，保存即可 2.'.npmrc 文件' 位置 2.1.每個項目的配置文件 -- （/path/to/my/project/.npmrc） 項目里面如果和package.json同級存放了這個.npmrc 2.2.每個用戶的配置文件 -- (~/.npmrc) 通過 'npm config ls -l' 指令找到'userconfig'字段看到具體位置，或者'npm config get userconfig' 2.3.全局配置文件 -- ($PREFIX/etc/npmrc) 通過 'npm config ls -l' 指令找到'globalconfig'字段看到具體位置,或者'npm config get globalconfig' 2.4.npm 內置配置文件 -- (/path/to/npm/npmrc) 就是全局'node_modules'下的npm里面 3.'.npmrc配置文件'中字段解釋'https://www.npmjs.cn/misc/config/' 4.指令配置'https://docs.npmjs.com/cli/v7/commands/npm-config' ~~~ >[info] ## 緩存 ~~~ 1.在執行 'npm install' 或 'npm update'命令下載依賴后，除了將依賴包安裝在 'node_modules' 目錄下外，還會在本地的緩存目錄緩存一份。查看緩存地址的指令： 'npm config get cache' 2.'cache'文件打開 可以看到三個文件 'content-v2' 、'index-v5'、 'tmp' 2.1.'content-v2'目錄用于存儲'tar'包的緩存，里面基本都是一些二進制文件，想具體看懂 文件到底是什么，將這些二進制文件的擴展名改為 '.tgz'，然后進行解壓，得到的結果其實 就是我們的 npm 包資源 2.2.'index-v5'目錄用于存儲'tar'包的'hash',這些內容就是 content-v2 里文件的索引 3.找到緩存文件。這里我在項目中安裝一個'sass-loader',得到了'package-lock.json' 文件找到'sass-loader對應resolved字段'，這里我是通過linux指令的文件查找， (win沒研究明白),通過在'index-v5'文件找到存儲'tar'包的'hash' ' grep "https://registry.npmjs.org/sass-loader/-/sass-loader-12.1.0.tgz" -r index-v5' 在找到對應文件內容中搜索字段'_shasum',將這段vaule 在'content-v2 ' 文件搜索 舉個例子上面的 _shasum 屬性 6926d1b194fbc737b8eed513756de2fcda7ea408 即為 tar 包的 hash， hash的前幾位 6926 即為緩存的前兩層目錄，文件目錄如下 'content-v2/69/26/d1b194fbc737b8eed513756de2fcda7ea408' 既可以找到緩存的壓縮包文件 ~~~ * cache 結構目錄  * resolved字段  * index-v5 文件  >[danger] ##### 通過npm info 找shasum ~~~ 1.在對應項目下輸入'npm info 查看的包名' ~~~  >[danger] ##### 整體流程 當 npm install 執行時，通過[pacote](https://www.npmjs.com/package/pacote)把相應的包解壓在對應的 node\_modules 下面。npm 在下載依賴時，先下載到緩存當中，再解壓到項目 node\_modules 下。pacote 依賴[npm-registry-fetch](https://github.com/npm/npm-registry-fetch#npm-registry-fetch)來下載包，npm-registry-fetch 可以通過設置 cache 屬性，在給定的路徑下根據[IETF RFC 7234](https://datatracker.ietf.org/doc/rfc7234/)生成緩存數據。 接著，在每次安裝資源時，根據 package-lock.json 中存儲的 integrity、version、name 信息生成一個唯一的 key，這個 key 能夠對應到 index-v5 目錄下的緩存記錄。如果發現有緩存資源，就會找到 tar 包的 hash，根據 hash 再去找緩存的 tar 包，并再次通過[pacote](https://www.npmjs.com/package/pacote)把對應的二進制文件解壓到相應的項目 node\_modules 下面，省去了網絡下載資源的開銷。 >[danger] ##### 緩存參考的文章 [npm緩存現在是怎么做的？細節一定必讀](https://www.zhihu.com/question/305539244) >[info] ## 參考文章 [npm基本用法及原理(10000+) - 漫漫字節|漫漫編程 (mmbyte.com)](https://www.mmbyte.com/article/185966.html) [前端工程化 - 剖析npm的包管理機制 (juejin.cn)](https://juejin.cn/post/6844904022080667661#heading-56) [npm及.npmrc文件](https://blog.csdn.net/yexudengzhidao/article/details/109702948) [鏈接](https://kaiwu.lagou.com/course/courseInfo.htm?courseId=584#/detail/pc?id=5906)