npm link 原理以及如何更好地对编译后的包进行调试
2023-06-13 09:14:29 时间
当我们的项目依赖 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 为例说明使用方式以及原理。
- 在
rollup源码目录，通过npm run watch进行构建，此时会生成带有source-map的构建文件。 - 在
rollup源码目录，执行yarn link，它会自动寻找当前目录的package.json中的name字段，并创建全局目录（~/.config/yarn/link）软链接至该项目 - 在自己项目，执行
yarn link rollup，将会替换node_modules/rollup，其软链接至全局目录
再来总结下 yarn link 的原理：
yarn link：将当前 package 软链接至~/.config/yarn/link，其名为 package 的名称，即package.json中的name字段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
作业
- 如何更好地去调试某些经编译的某个包
npm link的原理是什么