文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Yarn Link 是如何帮助开发者对 NPM 包进行 Debug 的?

2024-12-01 19:36

关注

大家好,我是前端西瓜哥。最近在研究 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。

$ yarn link
yarn link v1.22.17
success Registered "xigua".
info You can now run `yarn link "xigua"` in the projects where you want to use this package and it will be used instead.
Done in 0.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

$ yarn link xigua
yarn link v1.22.17
success Using linked package for "xigua".
Done in 0.01s.

它会做两个操作:

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

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

是的,但 yarn 更方便。

yarn unlink

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

$ yarn unlink xigua
yarn unlink v1.22.17
success Removed linked package "xigua".
info You will need to run `yarn install --force` to re-install the package that was linked.
Done in 0.01s.

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

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

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

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

$ yarn unlink
yarn unlink v1.22.17
success Unregistered "xigua".
info You can now run `yarn unlink "xigua"` in the projects where you no longer want to use this package.
Done in 0.01s.

结尾

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

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

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

来源:今日头条内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯