Vue3.x源码调试的实现方法

几句话说下我看源码的方式

断点调试

根据演示小例子或者美国石油学会(美国石油协会)的使用姿势进行调试，每个小例子只关心其走过的逻辑分支。

如何调试vue3.x的分时（同分时)源码

官网说使用纱线开发命令就可以对其进行调试，可是运行该命令后，是生成过后的代码，不能对其编写的分时（同分时)源码进行调试。其实再生成对应的sourcemap文件，便可以原汁原味的调试。先看下几个截图

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

生成sourcemap文件

汇总。射流研究…中文文档

//rollup.config.jsexport默认值{ //核心选项输入，//必须外部，插件，//额外选项onwarn，//危险区域acorn，context，moduleContext，旧版output: { //必须（如果要输出多个，可以是一个数组) //核心选项文件，//必须格式，//必须名称，全局，//额外选项路径，横幅，页脚，简介、outro、sourcemap、sourcemapFile、interop、//高危选项exports，amd，indent strict }，}；可以看到输出对象有个sourcemap属性，其实只要配置上这个就能生成sourcemap文件了。在vue-next项目中的rollup.config.js文件中，找到createConfig函数

函数createConfig(输出，plugins=[]){ const is Production Build=process。环境。_ _ DEV _ _==' false ' | |/\ .产品js$/.测试(输出。文件)const是全局版本=/\ .全局(\。prod)？\.js$/.测试(输出。file)const isBunlderESMBuild=/\ .esm\ .js$/.测试(输出。文件)const ISbrowseresmbuild=/ESM-browser(\).prod)？\.js$/.测试(输出。文件)if(IsGlobalBuild){输出。name=package OptiOns。name } const shouldItemDeclations=process。环境。类型！=空进程。ENV。NODE _ ENV===' production '！hasTSChecked const TSplugin=ts({ check : process。ENV。NODE _ ENV===' production '！hastsChecked，tsconfig :路径。解析(_ dirname，' tsconfig.json ')，cacheroot :路径。解析(_ dirname、' node_modules/.rts2_cache ')、tsconfigoverride : { compilerooptions 3360 { declaration : shortmitdeclarations、declaration map : shortomitdeclarations }、exclude 3:[' * */_ _ tests _ ']})//我们只需要检查分时（同timesharing）并生成一次声明//在一次构建中多次//检查时，它似乎也会遇到奇怪的问题hasTSChecked=true const externals=object。密钥(别名选项).过滤器(p=p！==' @ vue/shared)输出。源映射=true//这句话是新增的返回{ input : resolve(` src/index。ts `)，//全局和浏览器ESM构建所有内容的内联，以便它们可以//单独使用外部：是全局构建| | ISbrowseresmbuild？[] :外部，插件：[JSON({ name dexports 3360 false })、tsPlugin、aliasPlugin、create replace plugin(IsProductionBuild、isBunlderESMBuild、IsLobalBuild | | IsRowserverseBuild)、插件],输出，onwarn: (msg，warn)={ if(！/圆形/。测试（消息)){警告（消息)} } }加上一句output.sourcemap=true即可。然后运行纱线开发，可以看到vue/dist/vue.global.js.map文件已生成。再然后你在xxx.html通过脚本的方式引入vue.global.js文件，即可调试，效果如上图。

弱弱的说一句，我对分时（同分时)和汇总。射流研究…不熟，几乎陌生，但是不影响学习vue3.x源码vue3.x。的源码这次分几个模块编写的，所以学习也可以分模块学习，比如学习响应式系统，运行纱线发展反应性命令生成对应文件，然后配合__测试_ _下的案列，自己进行调试学习。(额，好像说了好几句.)

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持我们。