[[435868]]

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

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

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

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

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

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

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

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

2.npm緩存機(jī)制

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

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

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

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

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

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

3.如何驗(yàn)證組件的可行性

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

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

如何高效率在本地調(diào)試以驗(yàn)證包的可用性?使用npm link，將模塊鏈接到對(duì)應(yīng)的業(yè)務(wù)項(xiàng)目中運(yùn)行。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/中

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

4.npx的作用

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

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

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

npx eslint --init 
 
npx eslint yourfile.js 

之所以npx如此之便捷，是因?yàn)椋?/p>

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

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

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

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

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

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

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

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

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

6.參考 

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