Vue3.x源码调试

最新推荐文章于 2024-08-23 17:02:52 发布

小可乐程序员

最新推荐文章于 2024-08-23 17:02:52 发布

阅读量1.4k

点赞数

分类专栏： vue 文章标签： vue

本文链接：https://blog.csdn.net/weixin_45566319/article/details/102625428

版权

本文介绍了如何调试Vue3.x的源码，包括遇到的问题、解决方法和生成sourcemap的步骤。通过修改rollup.config.js和tsconfig.json配置，实现对Vue3.x ts源码的原汁原味调试。此外，还鼓励按模块学习，如响应式系统，并分享了移动开发与微信小程序开发的相关技术点。

摘要由CSDN通过智能技术生成

断点调试
根据demo小例子或者api的使用姿势进行调试，每个小例子只关心其走过的逻辑分支。
如何调试vue3.x的ts源码

官网说使用 yarn dev 命令就可以对其进行调试，可是运行该命令后，是生成过后的代码，不能对其编写的ts源码进行调试。
其实再生成对应的sourcemap文件，便可以原汁原味的调试。
先看下几个截图：
在这里插入图片描述

如果这是你想要的调试效果，下面请看下如何生成sourcemap文件。

生成sourcemap文件

rollup.js中文文档

// rollup.config.js
export default {
 // 核心选项
 input, // 必须
 external,
 plugins,
 // 额外选项
 onwarn,
 // danger zone
 acorn,
 context,
 moduleContext,
 legacy
 output: { // 必须 (如果要输出多个，可以是一个数组)
 // 核心选项
 file, // 必须
 format, // 必须
 name,
 globals,
 // 额外选项
 paths,
 banner,
 footer,
 intro,
 outro,
 sourcemap,
 sourcemapFile,
 interop,
 // 高危选项
 exports,
 amd,
 indent
 strict
 },
};
复制代码

可以看到output对象