初探 yarn/npm link
在开发过程中,我们经常会遇到需要在不同项目中共享自定义包的情况。为了解决这个问题,我们可以使用 yarn link
或 npm link
命令来在项目中创建软链接,使得一个包可以被其他项目直接引用。下面我们来探讨一下这个过程,并看看其中的一些使用场景。
创建示例目录和包
创建两个目录:被link的目录link_module
和link它的目录project
然后以此cd到各自的目录执行npm init -y
cd link_test
npm init -y
cd ..
cd project
npm init -y
这样两个目录都变成了两个包(前端中包的定义:含有package.json
的文件夹)
添加测试代码
添加一下测试代码:
// link_module/index.js
function print_link() {
console.log('link_module');
}
module.exports = print_link;
// project/index.js
const print_link = require('link_module')
print_link()
此时目录为
使用 yarn link 连接包
为了在 project
中使用 link_module
包,我们有几种策略可以选择:
- 通过路径,直接引入 缺点:如果
link_module
不在当前目录,还得去找 - 将
link_moudule
发包,再npm install 缺点:更新太麻烦,如果只是自己用没必要发包 link_module
通过yarn link
到全局,然后在project
目录里yarn link link_module
主要研究第三种:
可以看到 执行yarn link后多出来一个node_modules
目录而且是通过软链接链接到link_moudle
这时候我们去运行一下project/index.js
成功!!
理解 yarn link 的过程
当我们在 link_module
目录中运行 yarn link
后,会在全局目录下创建一个软链接,将 link_module
链接到全局包目录中。然后在 project
目录中运行 yarn link link_module
,会在 project
目录下创建一个软链接,将 link_module
链接到 project/node_modules
下。
这样,当在 project
中引用 link_module
时,实际上是在访问全局链接,而不是复制包的内容到 project
中。
这只是yarn link
的一个使用场景,下面才是最最重要的。
解决第三方包调试问题
当我们项目中引入开源包,比如rollup
时,我们端点调试只会进入rollup
打包之后的dist的文件,如下图
这样对我们调试是不太友好的,这时候我们会想到要是有相对应的
source-map
文件就好啦
那我们可以把rollup下载到本地,然后自己build生产 source-map
文件,然后通过 yarn link
一下,这样不就解决了
实战:
- 运行
npm run watch
- 运行
yarn link
- 项目中替换掉rollup
tips:
- windows如何查看
yarn link
全局注册到哪里?
$ yarn global dir
C:\Users\XXX\AppData\Local\Yarn\Data\global
返回Data目录就找到啦
返回yarn\Data目录里的link目录
- 如何查看一个项目中link了哪些包?
node_modules里软链接的包就是我们link的包
思考
npm link
的原理是什么
通过软链接的方式全局注册当前包,然后npm link xxx使用当前包后也是通过软链接的方法
- 如何更好地去调试某些经编译的 package
将package克隆到本地,然后link本地package,替换掉node_modules
里的
这就是关于使用 yarn link
进行包链接和它的应用场景的一些内容。如果你有更多问题或需要进一步帮助,随时提问!