成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

在前端中,什么是幽靈依賴?

開發 前端
它們是怎么解決這個問題的呢?npm、yarn?為了解決依賴關系過長時,導致的目錄結構過深,采用了扁平化?,也就是所有依賴都被拍平到node_modules目錄下。這樣的好處就是,不再有層級過深的問題。

前言

大家好,我是林三心,用最通俗易懂的話講最難的知識點是我的座右銘,基礎是進階的前提是我的初心。

幽靈依賴?

前幾天在公司的技術分享會上,我總是聽到大佬們在提起一個名詞——幽靈依賴,起初我沒有太在意,以為這個不太重要,所以就沒怎么去了解這個名詞。

直到我在做項目pnpm遷移的時候,我突然很想知道它跟幽靈依賴到底有什么關系呢?

其實在了解什么關系之前,我應該去了解一下什么是幽靈依賴,我們接著聊?。。?/p>

什么是幽靈依賴?

比如我現在,我在開發一個項目A,項目A中我裝了npm-lsx這個包,而這個npm-lsx的包依賴了npm-test,咱們來看看這兩處packages.json

依賴關系是:A <- npm-lsx <- npm-test

// 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的規則的話,那么目錄的結構應該是這樣的

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

但是如果依賴關系很長的話,那么會導致目錄深度非常深,所以我們常用的npm、yarn解決了這個問題

npm、yarn

它們是怎么解決這個問題的呢?npm、yarn為了解決依賴關系過長時,導致的目錄結構過深,采用了扁平化,也就是所有依賴都被拍平到node_modules目錄下。這樣的好處就是,不再有層級過深的問題。

現在目錄結構變成這樣了

// A/node_modules

node_modules
├── npm-lsx 
├── npm-test

幽靈依賴

接著上面的示例,繼續聊,請看下面的代碼

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

lsx()
test()

你們覺得這段代碼有問題嗎?其實運行起來是沒問題的。但是問題來了,我們項目中居然能直接引用npm-test這個包?。?!

我們都知道依賴關系是:

A <- npm-lsx <- npm-test

按理說,A是不能直接引用npm-test的,因為沒有直接依賴關系?。。。〉且驗榍懊嬲f了,npm、yarn會將依賴拍平在A的node_modules中,這導致了A可以直接require('npm-test')

我們稱這個npm-test為幽靈依賴?。?!

幽靈依賴的壞處?

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

已知你現在代碼是這樣

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

lsx()
test()

某天npm-lsx升級了!它不再依賴npm-test了!那么此時A的node-modules中變了!

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

// 現在
node_modules
├── npm-lsx

那么你的代碼會報錯!

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

lsx()
test() // 報錯!!!

其實這個情況還好,因為這種情況在打包上線過程中就會報錯依賴找不到了,所以不太會造成線上的報錯崩潰

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

我現在有兩個項目A和B

A中的node_modules目錄為,現階段npm-test的版本為1.0.0

// A/node_modules

node_modules
├── npm-lsx 
├── npm-test 版本號:1.0.0

A中某個文件的代碼為

const test = require('npm-test')

test()

B中某個文件的代碼為

const test = require('npm-test')

test()

當有一天npm-lsx所依賴的npm-test升級了!版本升級為了2.0.0

// A/node_modules

node_modules
├── npm-lsx 
├── npm-test 版本號:2.0.0

此時test的用法也變了~而因為A項目已經回歸過了,所以他知道,也改了對應的代碼

const test = require('npm-test')

test.run() // 修改代碼

而B項目就沒那么好運了,它并沒有進行回歸,所以并沒有去改代碼!?。?!

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

test() // 直接報錯

這就慘了,B項目在打包階段并不會因為依賴不到npm-test而報錯,所以它會順利上線。。然后,等到了線上運行起來,直接報錯!??!這是非常嚴重的的事故!

責任編輯:武曉燕 來源: 前端之神
相關推薦

2016-10-28 15:01:35

Cookie前端實踐

2022-11-21 18:02:04

前端測試

2020-07-14 14:59:00

控制反轉依賴注入容器

2025-04-07 02:30:00

Cursor前端

2012-07-19 15:54:14

2020-06-14 09:04:00

前端云計算無服務器

2024-07-02 09:03:48

2019-01-03 09:45:20

Go 前端 Web

2025-02-04 11:33:19

2015-10-23 11:15:32

前端性能優化

2020-03-13 13:45:41

前端面試Web

2017-02-24 14:18:50

前端HTTP緩存

2023-12-21 21:39:44

2015-10-12 16:37:39

前端編碼雙向編譯

2024-10-28 09:38:15

2024-06-14 08:36:57

2023-10-27 10:16:17

前端項目Rust

2024-05-10 06:59:06

2019-09-18 18:12:57

前端javascriptvue.js

2023-10-30 07:13:56

點贊
收藏

51CTO技術棧公眾號

主站蜘蛛池模板: 黄色网址在线免费观看 | 欧美日一区二区 | 欧美日韩午夜精品 | 黄色av网站在线免费观看 | 91九色在线观看 | 91视频91| 日韩在线欧美 | 亚洲高清视频在线观看 | 91精品国产91久久综合桃花 | 日韩图区 | 日本久久精品视频 | 久久se精品一区精品二区 | 国产一区二区在线视频 | av网站在线播放 | 国产一区成人 | 午夜精品久久 | 欧美激情一区二区三级高清视频 | 紧缚调教一区二区三区视频 | 狠狠操婷婷 | 欧美综合一区二区 | 欧美xxxx在线 | 精品国产欧美一区二区三区成人 | 麻豆av一区二区三区久久 | 国产精品7777777 | 黄色片免费在线观看 | 天堂一区二区三区四区 | 亚洲精品一区中文字幕乱码 | 中文字幕亚洲一区二区三区 | 九九热精品在线视频 | 午夜丰满寂寞少妇精品 | 欧美多人在线 | 国产成人一区 | 亚洲精品免费视频 | 国产精品久久一区二区三区 | 激情福利视频 | 成人欧美一区二区三区黑人孕妇 | 成人免费一级 | 欧美一区二区大片 | 免费在线观看一级毛片 | 成人国产毛片 | 亚洲精品电影网在线观看 |