相信很多同学都已经上手 Vue3 了,用起来是真香!

学习技术又怎能不学习源码,多看看源码,说不定自己哪天也成大佬了呢 ︿( ̄︶ ̄)︿

今天,我来记录一下自己调试 Vue3 源码的过程,方便以后参考。

准备工作

首先需要下载源码和安装依赖:

mkdir code
git clone https://github.com/vuejs/vue-next.git
cd ./vue-next
yarn install

执行完上面这一套之后,得到如下文件结构:

image-20210927181106256

贴心小提示:由于国内访问 Github 实在龟速,所以我一般都是将 Github 上的项目导入到 Gitee,然后从 Gitee 上克隆的,速度贼快!

基本调试

vue-next 目录下,使用终端执行 yarn run dev,得到如下输出:

image-20210927181630791

使用 VSCode 的 Live Server 插件运行 packages/vue/examples/composition/grid.html,然后打开控制台查看代码,结果是:

image-20210927193924649

所有的代码都被合到 vue.global.js 中了,调试代码时,走的都是这个文件中的代码,那如果想要调试 Vue3 的 TypeScript 源码的话,要怎么做呢?

调试 TypeScript 源码

首先,在 vue-next/package.json 的脚本指令中添加 -s 或者 -sourcemap:

image-20210927194536043

然后执行”开发调试“中的步骤,得到的结果如下:

image-20210927194645408

可以看到,此时,我们可以通过断点进入到 Vue3 的 TS 源码中了,也代表着我们在调试 Vue3 源码。

总结

通过上面的操作可以看到,如果我们在构建 Vue3 时增加 -sourcemap 参数,那得到的结果可以让我们在 Chrome 浏览器中直接调试 TS 源码。

~

~本文完,感谢阅读!

~

学习有趣的知识,结识有趣的朋友,塑造有趣的灵魂!

大家好,我是〖编程三昧〗的作者 隐逸王,我的公众号是『编程三昧』,欢迎关注,希望大家多多指教!

你来,怀揣期望,我有墨香相迎! 你归,无论得失,唯以余韵相赠!

知识与技能并重,内力和外功兼修,理论和实践两手都要抓、两手都要硬!