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


Posted in Javascript onOctober 13, 2019

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

断点调试

根据demo小例子或者api的使用姿势进行调试,每个小例子只关心其走过的逻辑分支。

如何调试vue3.x的ts源码

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

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

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

如果这是你想要的调试效果,下面请看下如何生成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对象有个sourcemap属性,其实只要配置上这个就能生成sourcemap文件了。 在vue-next项目中的rollup.config.js文件中,找到createConfig函数

function createConfig(output, plugins = []) {
 const isProductionBuild =
  process.env.__DEV__ === 'false' || /\.prod\.js$/.test(output.file)
 const isGlobalBuild = /\.global(\.prod)?\.js$/.test(output.file)
 const isBunlderESMBuild = /\.esm\.js$/.test(output.file)
 const isBrowserESMBuild = /esm-browser(\.prod)?\.js$/.test(output.file)

 if (isGlobalBuild) {
  output.name = packageOptions.name
 }

 const shouldEmitDeclarations =
  process.env.TYPES != null &&
  process.env.NODE_ENV === 'production' &&
  !hasTSChecked

 const tsPlugin = ts({
  check: process.env.NODE_ENV === 'production' && !hasTSChecked,
  tsconfig: path.resolve(__dirname, 'tsconfig.json'),
  cacheRoot: path.resolve(__dirname, 'node_modules/.rts2_cache'),
  tsconfigOverride: {
   compilerOptions: {
    declaration: shouldEmitDeclarations,
    declarationMap: shouldEmitDeclarations
   },
   exclude: ['**/__tests__']
  }
 })
 // we only need to check TS and generate declarations once for each build.
 // it also seems to run into weird issues when checking multiple times
 // during a single build.
 hasTSChecked = true

 const externals = Object.keys(aliasOptions).filter(p => p !== '@vue/shared')

 output.sourcemap = true // 这句话是新增的
 return {
  input: resolve(`src/index.ts`),
  // Global and Browser ESM builds inlines everything so that they can be
  // used alone.
  external: isGlobalBuild || isBrowserESMBuild ? [] : externals,
  plugins: [
   json({
    namedExports: false
   }),
   tsPlugin,
   aliasPlugin,
   createReplacePlugin(
    isProductionBuild,
    isBunlderESMBuild,
    isGlobalBuild || isBrowserESMBuild
   ),
   ...plugins
  ],
  output,
  onwarn: (msg, warn) => {
   if (!/Circular/.test(msg)) {
    warn(msg)
   }
  }
 }
}

加上一句output.sourcemap = true即可。 然后运行 yarn dev,可以看到vue/dist/vue.global.js.map文件已生成。 再然后你在xxx.html通过script的方式引入vue.global.js文件,即可调试, 效果如上图。

弱弱的说一句,我对ts和rollup.js不熟,几乎陌生,但是不影响学习vue3.x源码。 vue3.x的源码这次分几个模块编写的,所以学习也可以分模块学习,比如学习响应式系统,运行yarn dev reactivity命令生成对应文件,然后配合__tests__下的案列,自己进行调试学习。(额,好像说了好几句...)

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript中的107个基础知识收集整理 推荐
Mar 29 Javascript
基于jQuery的图片剪切插件
Aug 03 Javascript
javascript数组操作总结和属性、方法介绍
Apr 05 Javascript
Jquery对新插入的节点 绑定Click事件失效的解决方法
Jun 02 Javascript
JS当前页面登录注册框,固定DIV,底层阴影的实例代码
Sep 29 Javascript
用最少的JS代码写出贪吃蛇游戏
Jan 12 Javascript
Vue实现动态创建和删除数据的方法
Mar 17 Javascript
jQuery实现的回车触发按钮事件功能示例
Mar 25 jQuery
vue中子组件向父组件传递数据的实例代码(实现加减功能)
Apr 20 Javascript
微信小程序实现下拉刷新动画
Jun 21 Javascript
JS代码触发事件代码实例
Jan 02 Javascript
weui上传多图片,压缩,base64编码的示例代码
Jun 22 Javascript
使用webpack将ES6转化ES5的实现方法
Oct 13 #Javascript
vue中uni-app 实现小程序登录注册功能
Oct 12 #Javascript
Jquery 动态添加元素并添加点击事件实现过程解析
Oct 12 #jQuery
微信小程序 scroll-view 水平滚动实现过程解析
Oct 12 #Javascript
微信小程序iOS下拉白屏晃动问题解决方案
Oct 12 #Javascript
vue中添加与删除关键字搜索功能
Oct 12 #Javascript
jquery 遍历hash操作示例【基于ajax交互】
Oct 12 #jQuery
You might like
无线电的诞生过程
2021/03/01 无线电
PHP zlib扩展实现页面GZIP压缩输出
2010/06/17 PHP
php header Content-Type类型小结
2011/07/03 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
php常用字符串长度函数strlen()与mb_strlen()用法实例分析
2019/06/25 PHP
可以文本显示的公告栏的js代码
2007/03/11 Javascript
开发跨浏览器javascript常见注意事项
2009/01/01 Javascript
Prototype ObjectRange对象学习
2009/07/19 Javascript
jQuery中的常用事件总结
2009/12/27 Javascript
JS父页面与子页面相互传值方法
2014/03/05 Javascript
javascript数据类型示例分享
2015/01/19 Javascript
HTML5+setCutomValidity()函数验证表单实例分享
2015/04/24 Javascript
JS实现动态移动层及拖动浮层关闭的方法
2015/04/30 Javascript
jQuery 获取屏幕高度、宽度的简单实现案例
2016/05/17 Javascript
Javascript类型系统之String字符串类型详解
2016/06/21 Javascript
防止Node.js中错误导致进程阻塞的办法
2016/08/11 Javascript
Javascript vue.js表格分页,ajax异步加载数据
2016/10/24 Javascript
详解React native fetch遇到的坑
2018/08/30 Javascript
微信小程序 image组件遇到的问题
2019/05/28 Javascript
ES11屡试不爽的新特性,你用上了几个
2020/10/21 Javascript
Python数据库的连接实现方法与注意事项
2016/02/27 Python
python验证码识别教程之滑动验证码
2018/06/04 Python
pandas 数据归一化以及行删除例程的方法
2018/11/10 Python
Python3之手动创建迭代器的实例代码
2019/05/22 Python
使用PyTorch实现MNIST手写体识别代码
2020/01/18 Python
pytorch中index_select()的用法详解
2021/01/06 Python
Java的基础面试题附答案
2016/01/10 面试题
房地产销售员的自我评价分享
2013/12/04 职场文书
英语专业学生的自我评价
2013/12/30 职场文书
《桃花心木》教学反思
2014/02/17 职场文书
综合测评自我评价
2015/03/06 职场文书
2016年大学生暑期社会实践方案
2015/11/26 职场文书
小学信息技术教学反思
2016/02/16 职场文书
高一英语教学反思
2016/03/03 职场文书
CocosCreator入门教程之网络通信
2021/04/16 Javascript
对讲机的最大通讯距离是多少
2022/02/18 无线电