yarn link 发布之前调试神器

[huangshuwei]

前言

为了方便维护以及代码的复用，我们会把组件库、工具库这样可以复用的内容通过npm方式发布出去，但是如果对这些npm包进行调试将非常麻烦，有些问题需要在当前项目环境才能复现。而 yarn link可以很好的解决这个问题

场景

我们有一个项目A，项目A引用了一个叫做 vue-easytable 的组件库。而在项目A中发现这个组件库存在bug需要调试。

yarn link

很简单，我们只需要通过 cmd命令 cd 到 vue-easytable 项目目录，然后执行：

yarn link

执行成功会有如下类似提示：

yarn link v1.22.0
success Registered "vue-easytable".
info You can now run `yarn link "vue-easytable"` in the projects where you want to use this package and it will be used instead.
Done in 0.12s.

此时，yarn 会读取vue-easytable 包的 package.json，核心信息如下：

{
    "name": "vue-easytable",
    "version": "2.17.1",
    "main": "libs/main.js",
    ...
}

那么在全局环境就有了 vue-easytable 的包

yarn link [package]

此时我们就可以在项目A中连接到刚才的 vue-easytable 的包了，首先也是要 cd 到项目A 和 package.json 同级的目录，然后执行：

yarn link vue-easytable

执行成功后，会提示：

yarn link v1.22.0
success Using linked package for "vue-easytable".

调试

此时 A项目使用的 vue-easytable 包就不是通过包管理器安装的了，而是通过yarn link 的那个本地包。但是你需要重新运行项目才能生效。

上面提到，通过 yarn link 会读取当前vue-easytable包的package.json文件信息，而在A项目运行的时候也会读取vue-easytable包的package.json文件信息，只不过此时主要是读取的 main节点：

{
    "name": "vue-easytable",
    "version": "2.17.1",
    "main": "libs/main.js",
    ...
}

vue-easytable 发布的时候，用户使用时是通过 main 节点找的目录，而 "libs/main.js" 是打包后的文件，我们是很难调试的，所以这时候将 "main": "libs/main.js" 改为 "main": "packages/index.js" 即可，然后在A项目里重新运行项目，就可以对 vue-easytable 调试啦，并且对于后续 vue-easytable 里的代码修改，对于A项目都会即时生效。

解除 link

当项目调试完成后，在vue-easytable项目目录执行

yarn unlink

并在 A项目里执行

yarn install --check-files 还是需要重新执行安装的

yarn unlink vue-easytable
yarn install --check-files

建议

建议使不要使用 npm link ，因为会有很多副作用，它会修改你的项目代码，后续你还要做还原等处理。相比之下，yarn link 体验就太棒了