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

2022-11-02 16:53:58 浏览数 (1)

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

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

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

代码语言:javascript复制
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
代码语言:javascript复制
# 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 的原理是什么

0 人点赞