前言

大家好，我是林三心，用最通俗易懂的話講最難的知識(shí)點(diǎn)是我的座右銘，基礎(chǔ)是進(jìn)階的前提是我的初心。gGv28資訊網(wǎng)——每日最新資訊28at.com

幽靈依賴？

前幾天在公司的技術(shù)分享會(huì)上，我總是聽到大佬們?cè)谔崞鹨粋€(gè)名詞——幽靈依賴，起初我沒有太在意，以為這個(gè)不太重要，所以就沒怎么去了解這個(gè)名詞。gGv28資訊網(wǎng)——每日最新資訊28at.com

直到我在做項(xiàng)目pnpm遷移的時(shí)候，我突然很想知道它跟幽靈依賴到底有什么關(guān)系呢？gGv28資訊網(wǎng)——每日最新資訊28at.com

其實(shí)在了解什么關(guān)系之前，我應(yīng)該去了解一下什么是幽靈依賴，我們接著聊?。。?span style="display:none">gGv28資訊網(wǎng)——每日最新資訊28at.com

什么是幽靈依賴？

比如我現(xiàn)在，我在開發(fā)一個(gè)項(xiàng)目A，項(xiàng)目A中我裝了npm-lsx這個(gè)包，而這個(gè)npm-lsx的包依賴了npm-test，咱們來看看這兩處packages.jsongGv28資訊網(wǎng)——每日最新資訊28at.com

依賴關(guān)系是：A <- npm-lsx <- npm-testgGv28資訊網(wǎng)——每日最新資訊28at.com

// A/packages.json{  "name": "A",  "dependencies": {    "npm-lsx": "^1.0.0"  }}// A/node_modules/npm-lsx/packages.json{  "name": "npm-lsx",  "dependencies": {    "npm-test": "^1.0.0"  }}

node_modules規(guī)則

如果按照node_modules的規(guī)則的話，那么目錄的結(jié)構(gòu)應(yīng)該是這樣的gGv28資訊網(wǎng)——每日最新資訊28at.com

node_modules├── npm-lsx |   └── node_modules|       └── npm-test

但是如果依賴關(guān)系很長的話，那么會(huì)導(dǎo)致目錄深度非常深，所以我們常用的npm、yarn解決了這個(gè)問題gGv28資訊網(wǎng)——每日最新資訊28at.com

npm、yarn

它們是怎么解決這個(gè)問題的呢？npm、yarn為了解決依賴關(guān)系過長時(shí)，導(dǎo)致的目錄結(jié)構(gòu)過深，采用了扁平化，也就是所有依賴都被拍平到node_modules目錄下。這樣的好處就是，不再有層級(jí)過深的問題。gGv28資訊網(wǎng)——每日最新資訊28at.com

現(xiàn)在目錄結(jié)構(gòu)變成這樣了gGv28資訊網(wǎng)——每日最新資訊28at.com

// A/node_modulesnode_modules├── npm-lsx ├── npm-test

幽靈依賴

接著上面的示例，繼續(xù)聊，請(qǐng)看下面的代碼gGv28資訊網(wǎng)——每日最新資訊28at.com

const lsx = require('npm-lsx')const test = require('npm-test')lsx()test()

你們覺得這段代碼有問題嗎？其實(shí)運(yùn)行起來是沒問題的。但是問題來了，我們項(xiàng)目中居然能直接引用npm-test這個(gè)包！！！gGv28資訊網(wǎng)——每日最新資訊28at.com

我們都知道依賴關(guān)系是：gGv28資訊網(wǎng)——每日最新資訊28at.com

A <- npm-lsx <- npm-testgGv28資訊網(wǎng)——每日最新資訊28at.com

按理說，A是不能直接引用npm-test的，因?yàn)闆]有直接依賴關(guān)系啊?。。〉且?yàn)榍懊嬲f了，npm、yarn會(huì)將依賴拍平在A的node_modules中，這導(dǎo)致了A可以直接require('npm-test')gGv28資訊網(wǎng)——每日最新資訊28at.com

我們稱這個(gè)npm-test為幽靈依賴！??！gGv28資訊網(wǎng)——每日最新資訊28at.com

幽靈依賴的壞處？

某天 npm-lsx 不依賴 npm-test 了

已知你現(xiàn)在代碼是這樣gGv28資訊網(wǎng)——每日最新資訊28at.com

const lsx = require('npm-lsx')const test = require('npm-test')lsx()test()

某天npm-lsx升級(jí)了！它不再依賴npm-test了！那么此時(shí)A的node-modules中變了！gGv28資訊網(wǎng)——每日最新資訊28at.com

// 以前node_modules├── npm-lsx ├── npm-test// 現(xiàn)在node_modules├── npm-lsx

那么你的代碼會(huì)報(bào)錯(cuò)！gGv28資訊網(wǎng)——每日最新資訊28at.com

const lsx = require('npm-lsx')const test = require('npm-test') // 沒有l(wèi)sx()test() // 報(bào)錯(cuò)！??！

其實(shí)這個(gè)情況還好，因?yàn)檫@種情況在打包上線過程中就會(huì)報(bào)錯(cuò)依賴找不到了，所以不太會(huì)造成線上的報(bào)錯(cuò)崩潰gGv28資訊網(wǎng)——每日最新資訊28at.com

多項(xiàng)目引用同一個(gè)幽靈依賴

我現(xiàn)在有兩個(gè)項(xiàng)目A和BgGv28資訊網(wǎng)——每日最新資訊28at.com

A中的node_modules目錄為，現(xiàn)階段npm-test的版本為1.0.0gGv28資訊網(wǎng)——每日最新資訊28at.com

// A/node_modulesnode_modules├── npm-lsx ├── npm-test 版本號(hào)：1.0.0

A中某個(gè)文件的代碼為gGv28資訊網(wǎng)——每日最新資訊28at.com

const test = require('npm-test')test()

B中某個(gè)文件的代碼為gGv28資訊網(wǎng)——每日最新資訊28at.com

const test = require('npm-test')test()

當(dāng)有一天npm-lsx所依賴的npm-test升級(jí)了！版本升級(jí)為了2.0.0gGv28資訊網(wǎng)——每日最新資訊28at.com

// A/node_modulesnode_modules├── npm-lsx ├── npm-test 版本號(hào)：2.0.0

此時(shí)test的用法也變了~而因?yàn)锳項(xiàng)目已經(jīng)回歸過了，所以他知道，也改了對(duì)應(yīng)的代碼gGv28資訊網(wǎng)——每日最新資訊28at.com

const test = require('npm-test')test.run() // 修改代碼

而B項(xiàng)目就沒那么好運(yùn)了，它并沒有進(jìn)行回歸，所以并沒有去改代碼！?。?！gGv28資訊網(wǎng)——每日最新資訊28at.com

const test = require('npm-test') // 有test() // 直接報(bào)錯(cuò)

這就慘了，B項(xiàng)目在打包階段并不會(huì)因?yàn)橐蕾嚥坏絥pm-test而報(bào)錯(cuò)，所以它會(huì)順利上線。。然后，等到了線上運(yùn)行起來，直接報(bào)錯(cuò)?。。∵@是非常嚴(yán)重的的事故！gGv28資訊網(wǎng)——每日最新資訊28at.com

本文鏈接：http://www.tebozhan.com/showinfo-26-84468-0.html在前端中，什么是幽靈依賴？

聲明：本網(wǎng)頁內(nèi)容旨在傳播知識(shí)，若有侵權(quán)等問題請(qǐng)及時(shí)與本網(wǎng)聯(lián)系，我們將在第一時(shí)間刪除處理。郵件：2376512515@qq.com

上一篇： 頻繁切換v-show，不頻繁使用v-if？面試的時(shí)候可別再這么說了！

下一篇： 美團(tuán)一面：什么是CAS？有什么優(yōu)缺點(diǎn)？我說我知道AtomicInteger