当前位置:网站首页>yarn link 是如何帮助开发者对 NPM 包进行 debug 的?
yarn link 是如何帮助开发者对 NPM 包进行 debug 的?
2022-07-03 07:37:00 【前端西瓜哥】
大家好,我是前端西瓜哥。最近在研究 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
,然后看看效果不对。小瓜发现不对,再改,然后再复制,一连重复了好几次。
“我受不了了,得想个办法。”小瓜说。每次编译完都要手动进行复制操作,太搞人心态了。
机智的小瓜一番思考,最终想到了一个办法。
将 demo-project 下的 xigua 依赖包删除
然后创建一个 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.
它会做两个操作:
将 demo-project 下的 xigua 依赖包删除
然后创建一个 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。
我是前端西瓜哥,欢迎关注我,一起学前端。
边栏推荐
- 【MySQL 12】MySQL 8.0.18 重新初始化
- PAT甲级 1030 Travel Plan
- Leetcode 213: looting II
- 基于RNA的新型癌症疗法介绍
- Partage de l'expérience du projet: mise en œuvre d'un pass optimisé pour la fusion IR de la couche mindstore
- VMWare网络模式-桥接,Host-Only,NAT网络
- Technical dry goods | reproduce iccv2021 best paper swing transformer with Shengsi mindspire
- Shengsi mindspire is upgraded again, the ultimate innovation of deep scientific computing
- Lombok cooperates with @slf4j and logback to realize logging
- Introduction of buffer flow
猜你喜欢
Reconnaissance et détection d'images - Notes
Usage of requests module
技术干货|昇思MindSpore初级课程上线:从基本概念到实操,1小时上手!
Use of other streams
PAT甲级 1030 Travel Plan
VMware network mode - bridge, host only, NAT network
Technology dry goods | luxe model for the migration of mindspore NLP model -- reading comprehension task
Paper learning -- Study on the similarity of water level time series of Xingzi station in Poyang Lake
Common methods of file class
Understanding of class
随机推荐
Vertx restful style web router
TypeScript let与var的区别
Use of generics
技术干货|昇思MindSpore可变序列长度的动态Transformer已发布!
Mail sending of vertx
Vertx's responsive redis client
Inverted chain disk storage in Lucene (pfordelta)
Go language foundation ----- 02 ----- basic data types and operators
JUnit unit test of vertx
Use of other streams
Shengsi mindspire is upgraded again, the ultimate innovation of deep scientific computing
昇思MindSpore再升级,深度科学计算的极致创新
Spa single page application
lucene scorer
Topic | synchronous asynchronous
The difference between typescript let and VaR
圖像識別與檢測--筆記
Robots protocol
Go language foundation ----- 04 ----- closure, array slice, map, package
【MySQL 11】怎么解决MySQL 8.0.18 大小写敏感问题