当前位置:首页 > 科技  > 软件

在前端中,什么是幽灵依赖?

来源: 责编: 时间:2024-04-22 09:15:59 105观看
导读前言大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心。幽灵依赖?前几天在公司的技术分享会上,我总是听到大佬们在提起一个名词——幽灵依赖,起初我没有太在意,以为这个不太重要,所

前言

大家好,我是林三心,用最通俗易懂的话讲最难的知识点是我的座右铭,基础是进阶的前提是我的初心。Rdo28资讯网——每日最新资讯28at.com

幽灵依赖?

前几天在公司的技术分享会上,我总是听到大佬们在提起一个名词——幽灵依赖,起初我没有太在意,以为这个不太重要,所以就没怎么去了解这个名词。Rdo28资讯网——每日最新资讯28at.com

直到我在做项目pnpm迁移的时候,我突然很想知道它跟幽灵依赖到底有什么关系呢?Rdo28资讯网——每日最新资讯28at.com

其实在了解什么关系之前,我应该去了解一下什么是幽灵依赖,我们接着聊!!!Rdo28资讯网——每日最新资讯28at.com

什么是幽灵依赖?

比如我现在,我在开发一个项目A,项目A中我装了npm-lsx这个包,而这个npm-lsx的包依赖了npm-test,咱们来看看这两处packages.jsonRdo28资讯网——每日最新资讯28at.com

依赖关系是:A <- npm-lsx <- npm-testRdo28资讯网——每日最新资讯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的规则的话,那么目录的结构应该是这样的Rdo28资讯网——每日最新资讯28at.com

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

但是如果依赖关系很长的话,那么会导致目录深度非常深,所以我们常用的npm、yarn解决了这个问题Rdo28资讯网——每日最新资讯28at.com

npm、yarn

它们是怎么解决这个问题的呢?npm、yarn为了解决依赖关系过长时,导致的目录结构过深,采用了扁平化,也就是所有依赖都被拍平到node_modules目录下。这样的好处就是,不再有层级过深的问题。Rdo28资讯网——每日最新资讯28at.com

现在目录结构变成这样了Rdo28资讯网——每日最新资讯28at.com

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

幽灵依赖

接着上面的示例,继续聊,请看下面的代码Rdo28资讯网——每日最新资讯28at.com

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

你们觉得这段代码有问题吗?其实运行起来是没问题的。但是问题来了,我们项目中居然能直接引用npm-test这个包!!!Rdo28资讯网——每日最新资讯28at.com

我们都知道依赖关系是:Rdo28资讯网——每日最新资讯28at.com

A <- npm-lsx <- npm-testRdo28资讯网——每日最新资讯28at.com

按理说,A是不能直接引用npm-test的,因为没有直接依赖关系啊!!!但是因为前面说了,npm、yarn会将依赖拍平在A的node_modules中,这导致了A可以直接require('npm-test')Rdo28资讯网——每日最新资讯28at.com

我们称这个npm-test为幽灵依赖!!!Rdo28资讯网——每日最新资讯28at.com

幽灵依赖的坏处?

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

已知你现在代码是这样Rdo28资讯网——每日最新资讯28at.com

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

某天npm-lsx升级了!它不再依赖npm-test了!那么此时A的node-modules中变了!Rdo28资讯网——每日最新资讯28at.com

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

那么你的代码会报错!Rdo28资讯网——每日最新资讯28at.com

const lsx = require('npm-lsx')const test = require('npm-test') // 没有lsx()test() // 报错!!!

其实这个情况还好,因为这种情况在打包上线过程中就会报错依赖找不到了,所以不太会造成线上的报错崩溃Rdo28资讯网——每日最新资讯28at.com

多项目引用同一个幽灵依赖

我现在有两个项目A和BRdo28资讯网——每日最新资讯28at.com

A中的node_modules目录为,现阶段npm-test的版本为1.0.0Rdo28资讯网——每日最新资讯28at.com

// A/node_modulesnode_modules├── npm-lsx ├── npm-test 版本号:1.0.0

A中某个文件的代码为Rdo28资讯网——每日最新资讯28at.com

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

B中某个文件的代码为Rdo28资讯网——每日最新资讯28at.com

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

当有一天npm-lsx所依赖的npm-test升级了!版本升级为了2.0.0Rdo28资讯网——每日最新资讯28at.com

// A/node_modulesnode_modules├── npm-lsx ├── npm-test 版本号:2.0.0

此时test的用法也变了~而因为A项目已经回归过了,所以他知道,也改了对应的代码Rdo28资讯网——每日最新资讯28at.com

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

而B项目就没那么好运了,它并没有进行回归,所以并没有去改代码!!!!Rdo28资讯网——每日最新资讯28at.com

const test = require('npm-test') // 有test() // 直接报错

这就惨了,B项目在打包阶段并不会因为依赖不到npm-test而报错,所以它会顺利上线。。然后,等到了线上运行起来,直接报错!!!这是非常严重的的事故!Rdo28资讯网——每日最新资讯28at.com

本文链接://www.dmpip.com//www.dmpip.com/showinfo-26-84468-0.html在前端中,什么是幽灵依赖?

声明:本网页内容旨在传播知识,若有侵权等问题请及时与本网联系,我们将在第一时间删除处理。邮件:2376512515@qq.com

上一篇: 频繁切换v-show,不频繁使用v-if?面试的时候可别再这么说了!

下一篇: 美团一面:什么是CAS?有什么优缺点?我说我知道AtomicInteger

标签:
  • 热门焦点
Top
Baidu
map