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

发布时间：2025-11-04 14:19:16 来源：码上建站 作者：数据库

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

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

但不幸的服务器托管是，里面的代码是编译出来的，无法直接修改。

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

└── xigua-project

└── build

└── xigua（编译出来的文件夹）

├── fix.js

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

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

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

将 demo-project 下的免费源码下载 xigua 依赖包删除然后创建一个 xigua 软链接文件，链接到 xigua-project 下的编译文件夹（软链接可以理解为快捷方式文件，可以将文件位置重定向）。├── demo-project

│ └── node_modules

│ ├── apple

│ └── xigua（重定向） -> /xigua/build/node_modules/xigua

└── xigua-project

└── build

└── xigua（被链接的位置）

├── fix.js

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

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.

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

具体就是创建一个 xigua 软链接文件，服务器租用指向这个 xigua 目录。在 macOS 中，是在 ~/.config/yarn/link/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".

它会做两个操作：

小瓜震惊了：“这操作不就和我的做法一样吗？不过多了一个 中间人 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.

断开链接后，因为原来的包删掉并换了个链接文件，所以我们需要再把这个包装回来，需要执行 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.

结尾

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

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

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

相关文章