如何使用 npm link 来提升开发效率

2022.09.03

试想一种场景，我们有一个 monorepo，里面有 a，b 两个包，a 包引用了 b 包，你在 a 里面启动了本地开发服务器准备开发，但是你要修改 b 里面的东西，除非你在 b 包里改了东西，然后每次改完要测试发包，然后 a 升级 b 包的版本，重启服务器，这样你才能在 a 包里看到 b 里引入的变更。

整个链路有点繁琐了，npm link 命令就是为了解决这种情况而出现的。

还是上面的场景，我们只需要将 a 里面的 node_modules 里的 b 包指向我们本地的 b 包的文件夹（b 包的源码库），就能解决这个问题了。

来面来实操下，

先克隆下测试用的 demo 包，然后安装依赖，

git clone git@github.com:CaryWill/demo-npm-link-parent.git
npm i

它里面依赖了个 @carywill/demo-npm-link 包，这个就是我们要替换成本地的包，首先下载 @carywill/demo-npm-link 这个包的源码，然后进入到这个包所在的目录，然后使用 npm link 在全局的 node_modules 里创建了个同名的软链接指向我们当前这个目录，

git clone git@github.com:CaryWill/demo-npm-link.git
cd demo-npm-link
npm link

来确认下，

npm prefix -g // /Users/cary/.nvm/versions/node/v16.15.1
cd /Users/cary/.nvm/versions/node/v16.15.1/lib/node_modules
cd @carywill // 这个是我们的 @carywill/demo-npm-link 的 scope
ls // 你会发现有一个名为 demo-npm-link 的软链接

然后回到 demo-npm-link-parent 目录，使用 npm link @carywill/demo-npm-link 将 node_modules 里的 @carywill/demo-npm-link 替换成我们上一步的软链接，然后回到 demo-npm-link 目录（不是 node_modules 下面的那个，而是 git clone 下来的那个），对 index.js 文件做一些修改，然后回到 demo-npm-link-parent 目录，重启开发服务器 npm run dev，然后你就可以看到页面上的变更了。

如果你想使用 link 前的版本，那么重新执行下 npm i 的命令即可，

如何使用 npm link 来提升开发效率

参考