携手创作,共同成长!这是我参与「掘金日新计划 · 8 月更文挑战」的第16天,点击查看活动详情 >>
版本:3.2.31
想要学习vue3源码,首先需要知道如何调试vue3的源码。本文将介绍如何调试vue3源码。
1、下载源码
直接从GitHub上vue3的仓库获取,源码地址为:github.com/vuejs/core 。
需要注意的是,在GitHub上,vue3的源码在 core 目录下:
2、安装依赖
使用VsCode打开源码,当前下载的源码版本是 3.2.31:
在源码目录中,有个pnpm-lock.yaml 文件,该文件是用来管理依赖包的,在安装依赖时需要使用 pnpm install 命令安装,使用 npm 或 yarn 都会报错。
使用 npm install 命令报错:
使用 yarn 命令报错:
使用 pnpm install 命令成功安装:
3、启动 sourceMap
当我们执行 npm run dev 命令时,会执行 scripts/dev.js 文件,会在vue目录下生成dist文件夹。
我们来看看 scripts/dev.js 文件中 sourceMap 的配置:
启动 sourceMap
在 build 函数执行时,sourceMap 默认传入 true,即启动 sourceMap。在执行 npm run dev 命令时,会在vue目录下的dist文件夹生成 vue.global.js 和 vue.global.js.map 两个文件,表示已经开启了 sourceMap:
那么在调式时可以看到 packages 目录下的源码:
不启动sourceMap
如果在 build 函数执行时,sourceMap 传入 false,表示不启动 sourceMap,在执行 npm run dev 命令时,在vue目录下的dist文件夹只会生成 vue.global.js 文件:
在调式时无法看到 packages 目录下的源码:
4、调式源码
在启动了 sourceMap 之后,就可以调式源码了。
4.1 静态页面调试源码
在浏览器中直接打开 vue/examples 目录下的静态页面,在需要打断点的地方打上断点,即可对源码进行断点调试。如下图:
4.2 创建本地服务调试
利用 vscode 的 live server 插件,创建本地服务。
在 vscode 上安装 live server 插件成功后,在右下角有一个 Go Live 的提醒,点击它就能打开当前文件并放到它创建的服务器上了。
利用live server在浏览器上运行打开examples/composition/todomvc.html文件,在需要打断点的地方打上断点,即可对源码进行断点调试。如下图:
或者在需要打开的HTML页面右键,选择 Open with Live Server
命令,也可在浏览器中打开要调式的页面。如下图;
4.3 手动debugger
4.1 和 4.2 这两种方式都是在浏览器上打断点进行调试,除此之外,还可以在代码中直接写 debugger 进行源码调式。比如我们在 packages/runtime-dom/src/index.ts 文件的createApp 函数前面写上 debugger:
在浏览器运行HTML页面,就会马上进入debugger模式,直接定位到刚刚我们写有 debugger 的地方:
结语
至此,我们就可以愉快地调试vue3的源码了。