[[435868]]

眾所周知，前端發展到現在已經形成了完整的體系，除了框架的提高效率外，還有一系列的工程化操作。前端工程化離不開npm或yarn等管理工具，通過script串聯起各個職能部分，讓獨立的環節自動運轉起來。我們知道無論是npm還是yarn等管理工具的體積都是比較大的，那么實際使用過程中就會出現幾個疑問：

• 刪除node_modules和lockfiles文件，再重新install，這樣操作是否會存在風險呢?
• 把所有依賴都安裝在dependencies中，不區分devDependencies會有什么問題呢?
• 應用依賴了公共庫A和公共庫B，同時A依賴了B，那么B會被多次進行安裝或重復打包嗎?
• 一個項目中，既有人用npm，又有人使用了yarn，這會引發什么問題呢?
• 我們是否應該將lockfiles文件push到項目倉庫中?

1.npm的內部機制和核心原理

我們知道npm的核心目標就是給你和你的團隊、你的公司帶來最好的開源庫和依賴。我們知道在使用npm進行項目啟動最重要的環節就是安裝相關包和依賴，而在安裝過程中出現相關問題，最好的解決方法就是刪除node_modules，重新進行npm install。

npm的安裝機制優先安裝依賴包到當前項目目錄，使得各個項目依賴的包形成體系，可以減輕包的兼容性壓力，但是缺點是同一個依賴包可能在電腦上安裝多次。但是supervisor和gulp等可以使用全局安裝模式，方便注冊path環境變量，可以直接使用supervisor、gulp等命令。

當構建依賴樹時，不管是當前依賴還是依賴的子依賴時，都應該按照扁平化原則優先將其放置node_modules根目錄。在此過程 中，遇到相同模塊就判斷已放置在依賴樹中的版本是否兼容此模塊，符合則跳過，不符合則在當前node_modules目錄下放置該模塊。

前端工程中，依賴嵌套依賴，如果每個依賴包都從網絡中獲取安裝，那么就增加了時間成本，如果node_modules安裝包通過緩存進行獲取，就提升了安裝效率。對于一個依賴包的同一個版本進行本地化緩存，是當前依賴包管理工具的一個常見設計，可以通過命令npm config get cache進行獲取緩存。當我們打開本地緩存_cache文件時，npm緩存有三個目錄：

• content-v2 二進制文件
• index-v5 content-v2里文件索引
• tmp 臨時文件

2.npm緩存機制

那么這些緩存是如何存儲并被利用的呢?

當npm install執行時，通過pacote把相應的包解壓到對應的node_modules下面

pacote依賴npm-registry-fetch來下載包，在給定的路徑下根據IETF RFC 7234生成緩存數據

在每次安裝資源時，根據package-lock.json中存儲的integrity、version、name信息生成一個唯一的key

如果發現有緩存資源，就會找到tar包的hash，再次通過pacote把對應的二進制文件解壓到對應的項目node_modules下面

注意：緩存策略是從npm v5版本開始的，在npm v5版本前每個緩存的模塊在~/.npm文件夾中以模塊名的形式直接存儲，存儲結構是：{cache}/{name}/{version}

3.如何驗證組件的可行性

自定義npm init命令：npm init命令調用shell腳本輸出一個初始化的package.json文件。

倘若在開發組件庫時，某個組件開發完成后，如何驗證該組件能在實際業務項目中正常運行呢?可以在組件庫開發中，設計examples目錄或者一個playground啟動一個開發服務，以驗證組件的運行情況。此外，還可以手動復制粘貼組件并打包產出到業務項目的node_modules中進行驗證。

如何高效率在本地調試以驗證包的可用性?使用npm link，將模塊鏈接到對應的業務項目中運行。npm link的本質就是軟鏈接，主要做了兩件事情：

為目標npm模塊(npm-package 1)創建軟鏈接，將其鏈接到全局node模塊安裝路徑/usr/local/lib/node_modules/中

為目標npm模塊(npm-package 1)的可執行bin文件創建軟鏈接，將其鏈接到全局node命令安裝路徑/usr/local/bin/中

簡而言之，npm lick能夠在工程中解決依賴包在任何一個真實項目中進行調試的問題，并且操作起來更加方便快捷。

4.npx的作用

在傳統項目中使用eslint插件，需要先在命令行進行npm install eslint save-dev，然后再在項目進行命令行調用：

./node_modules/.bin/eslint --init 
 
./node_modules/.bin/eslint yourfile.js 

而使用npx操作就非常便捷，只需要：

npx eslint --init 
 
npx eslint yourfile.js 

之所以npx如此之便捷，是因為：

可以直接執行node_modules/.bin文件夾下的文件

可以自動去node_modules/.bin路徑和環境變量$PATH里面檢查命令是否存在

nox在執行模塊時會優先安裝依賴，但是在安裝執行后便刪除次依賴，這就避免了全局安裝模塊帶來的問題。

5.npm多源鏡像和企業級部署私服原理

例如：npm中的源(registry)對應地址是https://registry.npmjs.org/，我們在開發中常用nrm(npm的鏡像源管理工具)進行源的切換和管理。為什么官方源有那么安全，公司還要自己進行部署內部使用的鏡像源?原因有兩點：

部署鏡像后，可以確保高速、穩定的npm服務，使得發布私有模塊更加安全

審核機制，保障私服上的npm模塊質量和安全

如果我們要部署一個私有npm鏡像，有三個工具分別是：

npm的配置優先級：

6.參考 

《前端基礎設施建設與架構30講》