当我们的项目依赖 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
的原理是什么