npm link 原理以及如何更好地对编译后的包进行调试

当我们的项目依赖 rollup/vite/react/vue，那我们如何更好地对这些 package 进行调试呢？

如果直接打断点，则发现我们进入了一个非常庞大，约有几万行的文件，且都是编译后文件，非常难以调试。

以调试 rollup 为例，讲解如何更好的进行调试。

const rollup = require('rollup')

// rollup 的发包代码经过编译，不好调试。可以下载源码，使用 npm link 方便调试
const bundle = await rollup.rollup({
  input: ['./index.js'],
})

bundle.write({
  dir: 'dist/rollup/',
})

原理

当我们项目中依赖 rollup，并 require/import 引入它时，我们将会在 node_modules/rollup 中寻找它，并通过 package.json 中的 exports/main 字段定位到具体文件。

「而在 node_modules/rollup 中的文件，皆是我们构建之后的文件，且没有 source-map，因此造成调试的困难。」

「那我们将 rollup 源码下载到本地目录，并手动构建，生成 source-map，并将 node_modules/rollup 进行替换，岂不是可以根据源文件进行调试了？」

这就是 npm link 的工作原理，不过它是通过软链接的方式。由于 yarn/npm link 的原理相同，此处使用 yarn link 为例说明使用方式以及原理。

1. 在 rollup 源码目录，通过 npm run watch 进行构建，此时会生成带有 source-map 的构建文件。
2. 在 rollup 源码目录，执行 yarn link，它会自动寻找当前目录的 package.json 中的 name 字段，并创建全局目录（~/.config/yarn/link）软链接至该项目
3. 在自己项目，执行 yarn link rollup，将会替换 node_modules/rollup，其软链接至全局目录

再来总结下 yarn link 的原理：

1. yarn link：将当前 package 软链接至 ~/.config/yarn/link，其名为 package 的名称，即 package.json 中的 name 字段
2. yarn link rollup：将当前项目，即需调试项目目录中的 node_modulels/rollup 软链接到 ~/.config/yarn/link/rollup

# yarn link，查看全局的 link 都有哪些
$ ls -lh ~/.config/yarn/link
total 0
drwxr-xr-x  3 xiange  staff    96B Sep 29 09:45 @vitejs
lrwxr-xr-x  1 xiange  staff    32B Aug 24 16:48 examples -> ../../../Documents/node-examples
lrwxr-xr-x  1 xiange  staff    39B Sep  7  2021 react -> ../../../Documents/react/packages/react
lrwxr-xr-x  1 xiange  staff    30B Dec  6  2021 react-anime -> ../../../Documents/react-anime
lrwxr-xr-x  1 xiange  staff    43B Sep  7  2021 react-dom -> ../../../Documents/react/packages/react-dom
lrwxr-xr-x  1 xiange  staff    25B Sep 29 18:21 rollup -> ../../../Documents/rollup
lrwxr-xr-x  1 xiange  staff    40B Sep  7  2021 shared -> ../../../Documents/react/packages/shared
lrwxr-xr-x  1 xiange  staff    37B Sep 29 09:48 vite -> ../../../Documents/vite/packages/vite
lrwxr-xr-x  1 xiange  staff    26B Aug 13  2021 webpack -> ../../../Documents/webpack

# yarn link rollup，查看当前项目的 node_modules/rollup
$ ls -lah node_modules/rollup 
lrwxr-xr-x  1 shanyue  staff    33B Sep 29 18:21 node_modules/rollup -> ../../../.config/yarn/link/rollup

作业

1. 如何更好地去调试某些经编译的某个包
2. npm link 的原理是什么

本文由哈喽比特于2年以前收录，如有侵权请联系我们。
文章来源：https://mp.weixin.qq.com/s/xKwou1gGlTr7bRx1RT_jPA