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 相关文章推荐
js局部刷新页面时间具体实现
Jul 04 Javascript
告诉你什么是javascript的回调函数
Sep 04 Javascript
JavaScript实现的一个日期格式化函数分享
Dec 06 Javascript
JavaScrip调试技巧之断点调试
Oct 22 Javascript
js 获取本地文件及目录的方法(推荐)
Nov 10 Javascript
jQuery分页插件jquery.pagination.js使用方法解析
Feb 09 Javascript
ReactNative之键盘Keyboard的弹出与消失示例
Jul 11 Javascript
angular2模块和共享模块详解
Apr 08 Javascript
Angular5中调用第三方库及jQuery的添加的方法
Jun 07 jQuery
Vue中保存数据到磁盘文件的方法
Sep 06 Javascript
vuex的使用步骤
Jan 06 Vue.js
给原生html中添加水印遮罩层的实现示例
Apr 02 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
php mysql索引问题
2008/06/07 PHP
PHP实现移除数组中为空或为某值元素的方法
2017/01/07 PHP
PHP按一定比例压缩图片的方法
2018/10/12 PHP
php使用mysqli和pdo扩展,测试对比mysql数据库的执行效率完整示例
2019/05/09 PHP
php版本CKEditor 4和CKFinder安装及配置方法图文教程
2019/06/05 PHP
JavaScript 图像动画的小demo
2012/05/23 Javascript
jquery仿百度经验滑动切换浏览效果
2015/04/14 Javascript
详解JavaScript基于面向对象之继承实例
2015/12/16 Javascript
JavaScript的ExtJS框架中数面板TreePanel的使用实例解析
2016/05/21 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
JavaSctit 利用FileReader和滤镜上传图片预览功能
2017/09/05 Javascript
jQuery实现的简单动态添加、删除表格功能示例
2017/09/21 jQuery
移动端网页开发调试神器Eruda的介绍与使用技巧
2017/10/30 Javascript
微信小程序实现自定义modal弹窗封装的方法
2018/06/15 Javascript
微信小程序项目实践之主页tab选项实现
2018/07/18 Javascript
JavaScript引用类型Function实例详解
2018/08/09 Javascript
在angularJs中进行数据遍历的2种方法
2018/10/08 Javascript
vue+vant-UI框架实现购物车的复选框全选和反选功能
2019/11/05 Javascript
Vue程序化的事件监听器(实例方案详解)
2020/01/07 Javascript
Python自动化测试工具Splinter简介和使用实例
2014/05/13 Python
Python 功能和特点(新手必学)
2015/12/30 Python
深入解析Python的Tornado框架中内置的模板引擎
2016/07/11 Python
Python进阶之自定义对象实现切片功能
2019/01/07 Python
解决pyinstaller打包pyqt5的问题
2019/01/08 Python
Python学习笔记之读取文件、OS模块、异常处理、with as语法示例
2019/06/04 Python
python算法与数据结构之冒泡排序实例详解
2019/06/22 Python
python自定义时钟类、定时任务类
2021/02/22 Python
Python实现aes加密解密多种方法解析
2020/05/15 Python
涂鸦板简单实现 Html5编写属于自己的画画板
2016/07/05 HTML / CSS
《学会待客》教学反思
2014/02/22 职场文书
幼儿园开学寄语
2014/04/03 职场文书
三分钟英语演讲稿
2014/04/24 职场文书
缅怀先烈演讲稿
2014/09/03 职场文书
合同权益转让协议书模板
2014/11/18 职场文书
2015年学生管理工作总结
2015/05/26 职场文书
大国崛起观后感
2015/06/02 职场文书