自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

徹底搞懂 npm、yarn 與 pnpm 依賴管理邏輯

開發(fā) 前端
我們?cè)陧?xiàng)目開發(fā)的過程中會(huì)引用到各種不同的庫,各種庫又依賴了其他不同的庫,這些依賴應(yīng)該如何進(jìn)行管理,今天這篇文章主要聊的就是這個(gè)事情。


npm2的依賴管理

npm2 安裝依賴的時(shí)候比較簡(jiǎn)單直接,直接按照包依賴的樹形結(jié)構(gòu)下載填充本地目錄結(jié)構(gòu)。

比如在項(xiàng)目中A和 C 都依賴 B,無論被依賴的 B 是否是同一個(gè)版本,都會(huì)直接無腦的生成對(duì)應(yīng)的樹結(jié)構(gòu),比如我們現(xiàn)在有下面的依賴:

  • A@2.0.0:BaseA@1.0.0 BaseB@2.0.0
  • B@3.0.0:BaseA@1.0.0 BaseB@2.0.1

那么npm i之后node_modules里面生成的內(nèi)容將是下面這樣的

這樣的結(jié)構(gòu)非常直觀,但是有一個(gè)問題就是,如果項(xiàng)目的依賴過多的話,可能導(dǎo)致下面這些問題:

  1. 生成的依賴嵌套非常深
  2. 相同版本的依賴大量冗余

npm3/yarn的依賴管理

npm3對(duì)于npm2的情況進(jìn)行了優(yōu)化,那么如何進(jìn)行優(yōu)化呢?其實(shí)我們最直觀的思路就是將樹打平,將依賴扁平化,不就能解決嵌套過深和依賴冗余的問題。所以,在上面的例子中,如果我們用npm3來進(jìn)行install,最后生成的node_modules會(huì)是這樣的結(jié)構(gòu):

這樣看起來是不是就好多了,但是此時(shí)會(huì)有什么問題呢?我們實(shí)操一下試試看。在項(xiàng)目中安裝A和B

可以看到我們項(xiàng)目本身的依賴文件里面只有a_klx和b_klx,但是執(zhí)行完npm i命令后卻發(fā)現(xiàn)多了幾個(gè)我們沒有引入的包a_base_klx和b_base_klx。

其實(shí)這是由a_klx和b_klx本身自己引入的npm包,但是卻出現(xiàn)在了我們的node_modules下。那么如果我們直接使用這兩個(gè)包會(huì)有什么反應(yīng)呢?

可以看到,我們是可以正常使用這兩個(gè)我們并未聲明在依賴中的npm包的,因?yàn)檫@兩個(gè)包存在于我們項(xiàng)目的node_modules下,根據(jù)npm包的查找規(guī)則,我們是可以找到這兩個(gè)包的。所以這種依賴關(guān)系就導(dǎo)致了下面兩個(gè)問題:

  1. 我們項(xiàng)目本身的node_modules結(jié)構(gòu)不夠直觀
  2. 依賴不安全,我們可以使用依賴文件中并沒有聲明的npm包

其實(shí)第一點(diǎn)的問題并不是很大,主要是第二點(diǎn)可能會(huì)導(dǎo)致一些奇怪的問題。以我們之前的例子來說,我們可以直接在項(xiàng)目里面直接使用a_base_klx,因?yàn)閚ode_modules里面這兩個(gè)包實(shí)際上是存在的,但是他們又不是永遠(yuǎn)存在的。

萬一有一天,a_klx和b_klx里都去除了這兩個(gè)基礎(chǔ)包的引用,node_modules里面將不再存在a_base_klx和b_base_klx,那么我們的代碼就會(huì)出現(xiàn)問題...也就是:

我的代碼啥也沒動(dòng),放了一個(gè)晚上就壞了!

同時(shí),我們對(duì)于這種處理方式其實(shí)很容易有一個(gè)疑問,如果我同時(shí)引用了同一個(gè)包的多個(gè)不同版本,會(huì)幫我把哪個(gè)包提出來,同時(shí)我每次npm i之后提出來的包版本都是一樣的嗎?會(huì)不會(huì)存在這次是2.0.0版本下次是2.0.1版本的情況,比如我們下面這種情況:

  •  A@1.0.0:BaseA@1.0.0 BaseB@2.0.0
  • B@1.0.0:BaseA@1.0.0 BaseB@2.0.1
  • D@1.0.0:BaseA@1.0.0 BaseB@2.0.1

生成的依賴是下面這樣的:

還是下面這樣的:

其實(shí)看起來后面這個(gè)更合理,因?yàn)橛袃蓚€(gè)包用到了2.0.1版本,將它提出來更好,我們實(shí)際操作一下試試:

被提到最外層的包是2.0.0版本的,然后b_klx和d_klx的node_modules下面各自有一個(gè) b_base_klx@2.0.1

這一塊的內(nèi)容自己查了一下,大部分說法是會(huì)根據(jù)package.json里面的順序決定誰會(huì)被提出來,放在前面的包依賴的內(nèi)容會(huì)被先提出來。

不過自己實(shí)操了一下發(fā)現(xiàn)并不是這樣,即使我把b_klx或者d_klx移到最前面,被提出來的包依然是a_klx依賴的2.0.0版本,隨后自己翻了一下npm的源碼,發(fā)現(xiàn)內(nèi)部其實(shí)會(huì)對(duì)拿到的依賴列表進(jìn)行一些處理

最終會(huì)通過localeCompare方法對(duì)依賴進(jìn)行一次排序,所以字典序在前面的npm包的底層依賴會(huì)被優(yōu)先提出來,對(duì)于我們的例子來說就是a_klx所依賴的b_base_klx@2.0.0會(huì)被優(yōu)先提出來。

pnpm的依賴管理

pnpm為了解決上述這些問題,采用了一種不同于npm/yarn的依賴管理方式。

如果我們用pnpm再來安裝一遍上面的依賴,會(huì)發(fā)現(xiàn)項(xiàng)目的node_modules文件夾只有當(dāng)前package.json中所聲明的各個(gè)依賴(的軟連接),而真正的模塊文件,存在于node_modules/.pnpm,由模塊名@版本號(hào)形式的文件夾扁平化存儲(chǔ)(解決依賴重復(fù)安裝)。

同時(shí)這樣設(shè)計(jì),也很好的避免了之前可以訪問非法npm包的問題,因?yàn)楫?dāng)前項(xiàng)目的node_modules只有我們聲明過的依賴,這也讓node_modules里面的文件看起來非常的直觀。

同時(shí),node_modules/.pnpm中存儲(chǔ)的文件其實(shí)是pnpm實(shí)際緩存文件的「硬鏈接」,從而避免了多個(gè)項(xiàng)目帶來多份相同文件引起的空間浪費(fèi)問題。

但是說到硬鏈接,又有一個(gè)問題,這相當(dāng)于所有項(xiàng)目都依賴了同一個(gè)文件,那么在一個(gè)項(xiàng)目中修改了某個(gè)npm包的文件,就會(huì)影響到其他項(xiàng)目,這對(duì)于postinstall是很不友好的。

隨后繼續(xù)實(shí)操了一下,確實(shí)在不同項(xiàng)目中修改了某個(gè)npm包后會(huì)影響到其他項(xiàng)目。同時(shí)自己平時(shí)有時(shí)候也會(huì)直接在node_modules里面調(diào)試一些東西..感覺這種處理方式對(duì)于這種操作來說也不是很友好。

但是從pnpm的官網(wǎng)來看,其實(shí)它默認(rèn)會(huì)使用copy-on-write 的方式來進(jìn)行處理,也就是如果你嘗試對(duì)內(nèi)容進(jìn)行修改的話,會(huì)復(fù)制一份文件而不會(huì)影響到源文件。

然后它不生效的原因似乎是因?yàn)閘ibuv的bug:https://github.com/pnpm/pnpm/issues/2761,所以在copy-on-write不生效的情況下被回退到了hardlink  的方式去處理。

責(zé)任編輯:龐桂玉 來源: 前端大全
相關(guān)推薦

2021-11-29 12:11:09

npm包管理器工具

2024-06-20 08:06:04

2022-02-28 10:22:08

前端管理工具

2022-09-16 22:23:35

pnpmCLI軟件

2022-02-21 09:58:31

包管理器npmyarn

2024-05-10 08:41:05

NPMYarn

2025-03-25 08:50:00

2025-03-17 00:21:00

2023-04-12 00:00:40

Node.jsMonoreponpm

2022-08-03 00:04:29

pnpmyarnnpm

2023-10-07 08:35:07

依賴注入Spring

2021-06-30 08:45:02

內(nèi)存管理面試

2021-02-25 07:24:35

pnpm包管理器前端

2023-04-18 23:44:54

性能優(yōu)化開發(fā)preload

2025-04-21 04:00:00

2024-03-08 10:38:07

Vue響應(yīng)式數(shù)據(jù)

2024-12-04 13:54:19

pnpm存儲(chǔ)項(xiàng)目

2025-03-24 00:00:15

2024-01-03 13:39:00

JS,Javascrip算法

2023-10-18 10:55:55

HashMap
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)