百摩网
当前位置: 首页 生活百科

npm和yarn是干什么用的(yarnlink是如何帮助开发者对)

时间:2023-08-08 作者: 小编 阅读量: 4 栏目名: 生活百科

yarnlink是如何帮助开发者对大家好,我是前端西瓜哥最近在研究React源码,用到了yarnlink命令来链接两个项目我对其底层原理产生了兴趣,所以写了这么一篇文章,希望能够通过故事的形式,来让大家理解yarnlink的使用场景和。

npm和yarn是干什么用的?大家好,我是前端西瓜哥最近在研究 React 源码,用到了 yarn link 命令来链接两个项目,接下来我们就来聊聊关于npm和yarn是干什么用的?以下内容大家不妨参考一二希望能帮到您!

npm和yarn是干什么用的

大家好,我是前端西瓜哥。最近在研究 React 源码,用到了 yarn link 命令来链接两个项目。

我对其底层原理产生了兴趣,所以写了这么一篇文章,希望能够通过故事的形式,来让大家理解 yarn link 的使用场景和用法。

另外 npm link 和 yarn link 的效果是相同的,下文就不提及 npm link 了。

有一天,小瓜维护的一个名为 xigua 的 NPM 包,被人提了 issue。小瓜看了下问题描述,凭着对项目的熟悉,他大概知道是哪里出了问题。

为了测试,小瓜搭建了一个 demo-project 项目,且这个项目通过 yarn add xiga 安装了这个包,并在代码中使用了它。

└── demo-project└── node_modules├── apple└── xigua├── old.js└── package.json

理论上,小瓜去这个 demo-project 项目的 node_module/xigua 目录下直接修改代码就好了。

但不幸的是,里面的代码是编译出来的,无法直接修改。

小瓜于是跑到了 xigua-project 包的源码项目中,运行了一个可以监听源码修改生成 npm 包内容的命令。小瓜修改了一处代码,然后自动编译到了 xigua-project/build/ 中。

└── xigua-project└── build└── xigua(编译出来的文件夹)├── fix.js└── package.json

然后小瓜就复制编译好的代码,覆盖掉原来的 demo-project/node_module/xigua ,然后看看效果不对。小瓜发现不对,再改,然后再复制,一连重复了好几次。

“我受不了了,得想个办法。”小瓜说。每次编译完都要手动进行复制操作,太搞人心态了。

机智的小瓜一番思考,最终想到了一个办法。

  1. 将 demo-project 下的 xigua 依赖包删除
  2. 然后创建一个 xigua 软链接文件,链接到 xigua-project 下的编译文件夹(软链接可以理解为快捷方式文件,可以将文件位置重定向)

├── demo-project│ └── node_modules│├── apple│└── xigua(重定向) -> /xigua/build/node_modules/xigua└── xigua-project└── build└── xigua(被链接的位置)├── fix.js└── package.json

利用软链接,我们将两个项目关联了起来。

yarn link

此时,舍友小润抱着他的猹路过了,猹是他的猫的名字。

小瓜正对自己的奇思妙想沾沾自喜,立马向小润吹嘘起来。

小润:“这个需求,包管理器是有相关命令支持的。”

小瓜:“居然有!展开说说怎么用。”

小润于是讲解了起来。

其实很简单,我们进入到 xigua/build/xigua 目录下,执行 yarn link

$yarnlinkyarnlinkv1.22.17successRegistered"xigua".infoYoucannowrun`yarnlink"xigua"`intheprojectswhereyouwanttousethispackageanditwillbeusedinstead.✨Donein0.01s.

这样,包管理工具就会 在全局注册一个名为 xiuga 的链接。

具体就是创建一个 xigua 软链接文件,指向这个 xigua 目录。在 macOS 中,是在 ~/.config/yarn/link/xigua 目录下。

链接指向如下:

~/.config/yarn/link/xigua->/xigua-project/build/xigua

更准确来说,yarn link 是会从当前工作目录往上找第一个有正确 package.json 文件的目录,作为链接的对象,因为 npm 包里必须要有 package.json。

接下来我们再跑到 demo-project 项目的目录下,执行 yarn link xigua。

$yarnlinkxiguayarnlinkv1.22.17successUsinglinkedpackagefor"xigua".✨Donein0.01s.

它会做两个操作:

  1. 将 demo-project 下的 xigua 依赖包删除
  2. 然后创建一个 xigua 软链接文件,链接到 yarn/link/xigua。形成 demo-project -> yarn/link -> xigua-project 的链。

小瓜震惊了:“这操作不就和我的做法一样吗?不过多了一个 中间人 yarn”

是的,但 yarn 更方便。

yarn unlink

你在 demo-project 测试完了,想要断开链接,此时需要执行:

$yarnunlinkxiguayarnunlinkv1.22.17successRemovedlinkedpackage"xigua".infoYouwillneedtorun`yarninstall--force`tore-installthepackagethatwaslinked.✨Donein0.01s.

断开链接后,因为原来的包删掉并换了个链接文件,所以我们需要再把这个包装回来,需要执行 yarn install --force。

你说我删除 node_modules,然后再执行 yarn 行不行。

可以,前提是你的 node_modules 没有其他包的链接,否则的话会把其他包的链接也干掉。

如果要删除全局的注册的名为 xigua 的 link,需要进入到被链接的目录下,执行 yarn unlink

$yarnunlinkyarnunlinkv1.22.17successUnregistered"xigua".infoYoucannowrun`yarnunlink"xigua"`intheprojectswhereyounolongerwanttousethispackage.✨Donein0.01s.

结尾

yarn link 的作用是帮助我们调试开发的 NPM 包。

因为普通项目的依赖包安装是从网络下载安装的,如果要使用本地编译的 NPM 包,比较好的方式是删掉依赖包,通过快捷方式来链接我们本地编译包。

为了简化这一流程,yarn link 出现了,通过中间者的形式,来实现快速地 link 和 unlink。

    推荐阅读
  • 口罩颗粒过滤效率对应多大颗粒(对颗粒物滤除能力低)

    北京市市场监督管理局表示,对于抽查发现的不合格产品生产者、销售者,北京市市场监督管理局已全部移交经营主体所在地市场监管部门依法进行处理。佩戴后不应出现明显的压迫或压痛现象,不应明显影响视野。如佩戴过程中明显感觉呼吸阻力增加,应及时调整或更换口罩。全国党媒信息公共平台提供信息发布传播服务。

  • 推荐实用电水壶(电水壶哪个牌子好)

    2020年度电热水壶销售额TOP50热销机型数量,美的17个、苏泊尔13个、九阳7个、小米4个、小熊2个、奥克斯2个,象印、奥林格、南极人、布谷、容声,各获得1个。煎烤机2020年度品牌销售排行榜电蒸锅2020年度品牌销售排行榜电炖锅2020年度品牌销售排行榜电饭煲2020年度品牌销售排行榜电压力锅2020年度品牌销售排行榜,

  • 平行四边形怎么剪(平行四边形剪裁的方法)

    下面更多详细答案一起来看看吧!平行四边形怎么剪把长方形纸依左上角的点向下边画一条斜线。把剪下的三角形像下图这样放到剪纸的右面,用笔在上边取好点。这样做是为了使两边剪下的三角形尺寸一致用取好的点向右下角画上斜线。依然用剪刀沿线剪开,这样平行四边形就剪好了。

  • 关于春节的作文(关于春节的作文范文)

    关于春节的作文一年一度的春节来到了,春节也叫过年。传说很久很久以前有一个叫“年”的怪兽,他的头上长着角,非常厉害。平时,年兽就在年底,过春节时,年兽就会从海底出来,吃羊、猪、甚至吃人。原来,年兽怕红色、亮光和声音。从此,人们过春节就有了发红包,放鞭炮等习俗。春节真是一个开心、热闹、美好的节日,我真希望能天天过春节。

  • 黄金的分割率是0.618吗(身体中黄金分割值到底有哪些)

    不相信的话,你测量一下,肚脐上部与下部,之间比例是0.618。以脚部来说,脚后跟到脚趾0.618的地方,是涌泉穴。以头部来说,头顶到后脑勺0.618的地方,是百会穴、这个穴位,对身体调节,预防疾病、保健身体很重要。同时,你会发现,身体上,按照0.618比例计算,还有很多部位,都需要引起重视。科学睡眠睡眠,是极其重要事情,一天24小时,夜间的12小时,按照0.618比例,是7.5小时。

  • 西施优点(为什么现代人总爱用西施指代漂亮姑娘)

    相比之下,西施在被范蠡发现之前,只是越国的一个村姑,父亲是砍柴的,母亲是浣纱的。反观西施,虽然与带她出道的高富帅范蠡有一段不清不楚的感情,但为了复国大业,她却成了吴国的王妃。为成就大业而割弃儿女私情,这正是千古文人所称道的,更何况西施在吴国败亡之后又和范蠡双宿双飞,有情人终成眷属,结局也比较圆满,符合人民群众的朴素情感。

  • 梦见荷叶是什么意思(梦见荷叶的寓意)

    梦见荷叶是什么意思梦见到自己食荷叶的根和种子,大病的会很快痊愈。梦见荷花,家庭会和谐,自己心情会愉快。梦见陌生人向自己赠送荷花,靠朋友能发财。已婚男子梦见荷花,是祥瑞,会得财进宝。未婚男青年梦见荷花,是祥瑞,能找到一位如花似玉的妻子。工作人员梦见荷花,要谦虚谨慎,才能得到上司的欢喜,会被權升。女人梦见荷花,会嫁给温柔的丈夫。梦见吃荷叶包的食物,身边有人会升官发财,而自己会获得这位贵人的信任。

  • 从事宠物美容师的感受(新职业宠物美容师兴起背后)

    经济观察网记者郑淯心秋招时,宠物家人才培训中心负责人皓奕去专业院校招聘宠物美容师,经常有学校问她:可以帮学校丰富课程吗?11月14日,皓奕向记者介绍,宠物经济快速发展,市场对人才的需求爆发,但学校对宠物美容师人才的培育模式还未完善,宠物美容师等职业市场供需不平衡。据皓奕介绍,平均每招收一个美容师,宠物家的培训投入都在几万元。

  • neck是什么意思(neck的意思)

    neck的意思:n.脖子;衣领;领圈;有…下面内容希望能帮助到你,我们来一起看看吧!脖子的;vi.搂着脖子亲吻;相拥互吻;neck的读音:英[nek],美[nek]。

  • 除草剂的作用原理是什么(除草剂的作用原理简述)

    除草剂的作用原理是什么除草剂由于干扰或破坏了杂草的正常生理代谢致使杂草死亡,其机制是比较复杂的,多数除草剂的杀草作用并非只限于一种,而往往是几种共同作用的结果。同时,由于干扰了杂草的正常生理代谢过程,使之产生一系列代谢紊乱的症状,严重时便使杂草全株枯死;四是干扰核酸代谢和蛋白质的合成,酶的合成受阻,细胞不能正常分裂,杂草的生长发育和代谢活动发生变异,生长停滞,杂草畸形,最终死亡。