前言

大家好，我是林三心，用最通俗易懂的話講最難的知識點是我的座右銘，基礎是進階的前提是我的初心。LJt28資訊網——每日最新資訊28at.com

幽靈依賴？

前幾天在公司的技術分享會上，我總是聽到大佬們在提起一個名詞——幽靈依賴，起初我沒有太在意，以為這個不太重要，所以就沒怎么去了解這個名詞。LJt28資訊網——每日最新資訊28at.com

直到我在做項目pnpm遷移的時候，我突然很想知道它跟幽靈依賴到底有什么關系呢？LJt28資訊網——每日最新資訊28at.com

其實在了解什么關系之前，我應該去了解一下什么是幽靈依賴，我們接著聊！！！LJt28資訊網——每日最新資訊28at.com

什么是幽靈依賴？

比如我現在，我在開發一個項目A，項目A中我裝了npm-lsx這個包，而這個npm-lsx的包依賴了npm-test，咱們來看看這兩處packages.jsonLJt28資訊網——每日最新資訊28at.com

依賴關系是：A <- npm-lsx <- npm-testLJt28資訊網——每日最新資訊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規則

如果按照node_modules的規則的話，那么目錄的結構應該是這樣的LJt28資訊網——每日最新資訊28at.com

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

但是如果依賴關系很長的話，那么會導致目錄深度非常深，所以我們常用的npm、yarn解決了這個問題LJt28資訊網——每日最新資訊28at.com

npm、yarn

它們是怎么解決這個問題的呢？npm、yarn為了解決依賴關系過長時，導致的目錄結構過深，采用了扁平化，也就是所有依賴都被拍平到node_modules目錄下。這樣的好處就是，不再有層級過深的問題。LJt28資訊網——每日最新資訊28at.com

現在目錄結構變成這樣了LJt28資訊網——每日最新資訊28at.com

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

幽靈依賴

接著上面的示例，繼續聊，請看下面的代碼LJt28資訊網——每日最新資訊28at.com

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

你們覺得這段代碼有問題嗎？其實運行起來是沒問題的。但是問題來了，我們項目中居然能直接引用npm-test這個包！！！LJt28資訊網——每日最新資訊28at.com

我們都知道依賴關系是：LJt28資訊網——每日最新資訊28at.com

A <- npm-lsx <- npm-testLJt28資訊網——每日最新資訊28at.com

按理說，A是不能直接引用npm-test的，因為沒有直接依賴關系啊！！！但是因為前面說了，npm、yarn會將依賴拍平在A的node_modules中，這導致了A可以直接require('npm-test')LJt28資訊網——每日最新資訊28at.com

我們稱這個npm-test為幽靈依賴！！！LJt28資訊網——每日最新資訊28at.com

幽靈依賴的壞處？

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

已知你現在代碼是這樣LJt28資訊網——每日最新資訊28at.com

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

某天npm-lsx升級了！它不再依賴npm-test了！那么此時A的node-modules中變了！LJt28資訊網——每日最新資訊28at.com

// 以前node_modules├── npm-lsx ├── npm-test// 現在node_modules├── npm-lsx

那么你的代碼會報錯！LJt28資訊網——每日最新資訊28at.com

const lsx = require('npm-lsx')const test = require('npm-test') // 沒有lsx()test() // 報錯！！！

其實這個情況還好，因為這種情況在打包上線過程中就會報錯依賴找不到了，所以不太會造成線上的報錯崩潰LJt28資訊網——每日最新資訊28at.com

多項目引用同一個幽靈依賴

我現在有兩個項目A和BLJt28資訊網——每日最新資訊28at.com

A中的node_modules目錄為，現階段npm-test的版本為1.0.0LJt28資訊網——每日最新資訊28at.com

// A/node_modulesnode_modules├── npm-lsx ├── npm-test 版本號：1.0.0

A中某個文件的代碼為LJt28資訊網——每日最新資訊28at.com

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

B中某個文件的代碼為LJt28資訊網——每日最新資訊28at.com

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

當有一天npm-lsx所依賴的npm-test升級了！版本升級為了2.0.0LJt28資訊網——每日最新資訊28at.com

// A/node_modulesnode_modules├── npm-lsx ├── npm-test 版本號：2.0.0

此時test的用法也變了~而因為A項目已經回歸過了，所以他知道，也改了對應的代碼LJt28資訊網——每日最新資訊28at.com

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

而B項目就沒那么好運了，它并沒有進行回歸，所以并沒有去改代碼！！！！LJt28資訊網——每日最新資訊28at.com

const test = require('npm-test') // 有test() // 直接報錯

這就慘了，B項目在打包階段并不會因為依賴不到npm-test而報錯，所以它會順利上線。。然后，等到了線上運行起來，直接報錯！！！這是非常嚴重的的事故！LJt28資訊網——每日最新資訊28at.com

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。郵件：2376512515@qq.com

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

下一篇： 美團一面：什么是CAS？有什么優缺點？我說我知道AtomicInteger