在前端工程化中，JavaScript 依賴包管理是非常重要的一環(huán)。依賴包通常是項(xiàng)目所依賴的第三方庫(kù)、工具和框架等資源，它們能夠幫助我們減少重復(fù)開(kāi)發(fā)、提高效率并且確保項(xiàng)目可以正確的運(yùn)行。

目前比較常見(jiàn)的前端包管理器有 npm 和 Yarn，npm 是 Node.js 自帶的包管理器，它可以安裝、共享和分發(fā) node.js 模塊。最近pnpm也挺火的，通過(guò)并行下載和安裝依賴項(xiàng)，在執(zhí)行安裝、更新、刪除等操作時(shí)也更快。

但無(wú)論使用哪個(gè)包管理器，都要通過(guò) package.json 文件的版本控制功能，保證在不同開(kāi)發(fā)環(huán)境中的一致性。那么，package.json是如何進(jìn)行依賴包管理的呢？我們來(lái)一起深入了解一下package.json的配置方式。

一、分類管理

根據(jù)package.json規(guī)范，依賴包被大致分為以下幾種：dependencies、devDependencies、optionalDependencies、peerDependencies和bundledDependencies總共5種。dependencies和devDependencies這兩項(xiàng)是我們使用較為頻繁的。

1、dependencies

工程在生產(chǎn)環(huán)境下也需要使用的依賴，例如react、antd等，使用npm安裝插件時(shí)，會(huì)默認(rèn)寫(xiě)入dependencies，也可以使用-P或--save-prod后綴。

2、devDependencies

工程只有開(kāi)發(fā)環(huán)境需要，生產(chǎn)環(huán)境不需要的依賴，例如eslint、babel等，使用-D或--save-dev來(lái)寫(xiě)入devDependencies。

3、optionalDependencies

顧名思義，依賴是可選的，它們只有在運(yùn)行時(shí)需要使用某些功能時(shí)才會(huì)被引入。通常用于實(shí)現(xiàn)某些可選的功能或優(yōu)化。例如，一個(gè)包可能依賴于某個(gè)庫(kù)來(lái)實(shí)現(xiàn)某種高級(jí)功能，但是這個(gè)庫(kù)在某些環(huán)境下不存在或不可用。在這種情況下，可以將該庫(kù)聲明為可選依賴項(xiàng)，并在代碼中檢查該依賴項(xiàng)是否存在，然后根據(jù)情況來(lái)決定是否使用該高級(jí)功能。使用這個(gè)功能的工程比較少，使用-O或--save-optional來(lái)寫(xiě)入optionalDependencies。

4、peerDependencies

工程需要和這個(gè)依賴配套使用，一般用于解決插件依賴的核心庫(kù)的版本和主項(xiàng)目依賴的核心庫(kù)的版本不一致的問(wèn)題，常見(jiàn)于開(kāi)發(fā)配套插件。例如vuex@4.1.0聲明了：

"peerDependencies": {
   "vue": "^3.2.0"
}

表明vuex@4.1.0需要和vue@^ 3.2.0一起安裝和使用，否則可能會(huì)出現(xiàn)異常。使用-O或--save-optional來(lái)寫(xiě)入optionalDependencies。

5、bundledDependencies

工程依賴于某些特定的依賴項(xiàng)，并且希望在運(yùn)行時(shí)不必再次下載它們，則可以使用該選項(xiàng)。npm pack會(huì)將這些依賴一同放入生成的包中，并且在npm install時(shí)本工程，這些依賴項(xiàng)也會(huì)被一同安裝。使用-B或--save-bundle來(lái)寫(xiě)入bundledDependencies。

看到這里你可能會(huì)有點(diǎn)疑問(wèn)，為什么npm沒(méi)有提供類似--save-peer的指令來(lái)寫(xiě)入peerDependencies呢？原因是peerDependencies暗示本工程將會(huì)被其他主模塊使用，但是主模塊本身并不需要在項(xiàng)目代碼中顯式使用。因此官方?jīng)]有支持這一指令。

二、版本管理

一般情況下，以上依賴配置（除了bundledDependencies）都需要指定依賴的版本號(hào)，版本號(hào)遵循semver語(yǔ)義化版本規(guī)范（Semantic Versioning）命名規(guī)則，可以用下圖表示，如2.1.0、3.1.4-beta.2等。

• 當(dāng)發(fā)生不兼容的 API 修改時(shí)，更新major位
• 當(dāng)做了向下兼容的功能性新增時(shí)，更新minor位
• 當(dāng)做了向下兼容的問(wèn)題修正時(shí)，更新patch位

可選的-tags即先行版本號(hào)，可以作為發(fā)布正式版之前的版本，格式是在修訂版本號(hào)后面加上一個(gè)連接號(hào)（-），再加上一連串以點(diǎn)（.）分割的標(biāo)識(shí)符，標(biāo)識(shí)符可以由英文、數(shù)字和連接號(hào)（[0-9A-Za-z-]）組成。

在 npm 的依賴的規(guī)則中，還有~、>、<、=、>=、<=、-、||、x、X、*等符號(hào)來(lái)描述適用的版本范圍；

• ^ ：表示只鎖定major，不小于指定版本號(hào)的版本范圍。例如^1.1.0，代表>=1.1.0 <2.0.0的版本范圍。

• ~ ：表示鎖定major和minor，不小于指定版本號(hào)的版本號(hào)。例如~1.1.0，代表>=1.1.0 <1.2.0的版本范圍。

• x、X、*：表示通配符。例如1.1.x，也代表>=1.1.0 <1.2.0的版本范圍。

默認(rèn)情況下，若指定了一個(gè)版本范圍，npm會(huì)在范圍內(nèi)安裝最新版本的依賴。當(dāng)使用 npm install XX 時(shí)，會(huì)安裝當(dāng)前最新版本，并在版本號(hào)前默認(rèn)加上 ^ 符號(hào)。因此在安裝運(yùn)行老項(xiàng)目時(shí)，很容易出現(xiàn)安裝依賴后，項(xiàng)目啟動(dòng)報(bào)錯(cuò)的情況，原因就是某些依賴沒(méi)有做到很好的向下兼容，導(dǎo)致重新安裝的版本太高造成兼容性錯(cuò)誤，此時(shí)需要定位錯(cuò)誤依賴并回退版本。

三、npm install加載機(jī)制

npm install核心流程大致分為以下5步：

1、npm 向 registry 查詢依賴壓縮包的網(wǎng)址。
2、下載壓縮包，存放在cache目錄，供下次安裝時(shí)使用。
3、解壓壓縮包到當(dāng)前項(xiàng)目的node_modules目錄。
4、把所有安裝的包信息寫(xiě)入package-lock.json，供下次安裝時(shí)使用。
5、繼續(xù)處理依賴的依賴。

install的過(guò)程速度也和每一個(gè)步驟息息相關(guān)：
（1）共享工程package-lock.json，可以避免向registry查詢的步驟，并且保證不同環(huán)境下安裝包的一致性。
（2）使用下載速度快的registry鏡像（例如jd鏡像）。
（3）預(yù)先進(jìn)行依賴關(guān)系分析構(gòu)建依賴關(guān)系，然后最后再并行下載（例如yarn）。

希望以上的介紹能夠幫助你更好的理解npm的依賴管理。

到此這篇關(guān)于Node工程的依賴包管理方式的文章就介紹到這了,更多相關(guān)Node依賴包管理方式內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論