【前端工程化】缔造包之缘：揭秘 yarn/npm link

初探 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 包，我们有几种策略可以选择：

1. 通过路径，直接引入 缺点：如果 link_module 不在当前目录，还得去找
2. 将link_moudule发包，再npm install 缺点：更新太麻烦，如果只是自己用没必要发包
3. 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 一下，这样不就解决了

实战：

1. 运行npm run watch

2. 运行yarn link

3. 项目中替换掉rollup

tips：

1. windows如何查看yarn link全局注册到哪里？

$ yarn global dir

C:\Users\XXX\AppData\Local\Yarn\Data\global

返回Data目录就找到啦

返回yarn\Data目录里的link目录

3. 如何查看一个项目中link了哪些包？

node_modules里软链接的包就是我们link的包

思考

1. npm link 的原理是什么

通过软链接的方式全局注册当前包，然后npm link xxx使用当前包后也是通过软链接的方法

2. 如何更好地去调试某些经编译的 package

将package克隆到本地，然后link本地package，替换掉node_modules里的

这就是关于使用 yarn link 进行包链接和它的应用场景的一些内容。如果你有更多问题或需要进一步帮助，随时提问！