[[435868]]

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

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

1.npm的內(nèi)部機(jī)制和核心原理

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

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

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

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

• content-v2 二進(jìn)制文件
• index-v5 content-v2里文件索引
• tmp 臨時文件

2.npm緩存機(jī)制

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

當(dāng)npm install執(zhí)行時，通過pacote把相應(yīng)的包解壓到對應(yīng)的node_modules下面

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

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

如果發(fā)現(xiàn)有緩存資源，就會找到tar包的hash，再次通過pacote把對應(yīng)的二進(jìn)制文件解壓到對應(yīng)的項目node_modules下面

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

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

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

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

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

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

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

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

4.npx的作用

在傳統(tǒng)項目中使用eslint插件，需要先在命令行進(jìn)行npm install eslint save-dev，然后再在項目進(jìn)行命令行調(diào)用：

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

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

npx eslint --init 
 
npx eslint yourfile.js 

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

可以直接執(zhí)行node_modules/.bin文件夾下的文件

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

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

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

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

部署鏡像后，可以確保高速、穩(wěn)定的npm服務(wù)，使得發(fā)布私有模塊更加安全

審核機(jī)制，保障私服上的npm模塊質(zhì)量和安全

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

npm的配置優(yōu)先級：

6.參考 

《前端基礎(chǔ)設(shè)施建設(shè)與架構(gòu)30講》