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 事件查询综合
Jul 13 Javascript
JQuery中html()方法使用不当带来的陷阱
Apr 07 Javascript
原生JS实现表单checkbook获取已选择的值
Jul 21 Javascript
php跨域调用json的例子
Nov 13 Javascript
jQuery实现当按下回车键时绑定点击事件
Jan 28 Javascript
JavaScript设计模式之装饰者模式介绍
Dec 28 Javascript
jQuery插件HighCharts绘制2D饼图效果示例【附demo源码下载】
Mar 21 jQuery
TypeScript开发Node.js程序的方法
Apr 30 Javascript
详解无限滚动插件vue-infinite-scroll源码解析
May 12 Javascript
jQuery+PHP+Ajax实现动态数字统计展示功能
Dec 25 jQuery
JS中的const命令你真懂它吗
Mar 08 Javascript
Vant 中的Toast设置全局的延迟时间操作
Nov 04 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+MySQL5.0中文乱码解决方法
2006/11/20 PHP
php对gzip文件或者字符串解压实例参考
2008/07/25 PHP
PHP输出数组中重名的元素的几种处理方法
2012/09/05 PHP
php使用smtp发送支持附件的邮件示例
2014/04/13 PHP
WordPress中用于更新伪静态规则的PHP代码实例讲解
2015/12/18 PHP
js下用gb2312编码解码实现方法
2009/12/31 Javascript
JavaScript闭包 懂不懂由你反正我是懂了
2011/10/21 Javascript
JS实现点击下载的小例子
2013/07/10 Javascript
jquery实现更改表格行顺序示例
2014/04/30 Javascript
jQuery中remove()方法用法实例
2014/12/25 Javascript
bootstrap3 兼容IE8浏览器!
2016/05/02 Javascript
AngularJs expression详解及简单示例
2016/09/01 Javascript
基于JS实现移动端向左滑动出现删除按钮功能
2017/02/22 Javascript
详解Vue.js搭建路由报错 router.map is not a function
2017/06/27 Javascript
Vue实现virtual-dom的原理简析
2017/07/10 Javascript
BootStrap 标题设置跨行无效的解决方法
2017/10/25 Javascript
浅谈webpack 自动刷新与解析
2018/04/09 Javascript
js中async函数结合promise的小案例浅析
2019/04/14 Javascript
JavaScript实现打字游戏
2021/02/19 Javascript
Python中subprocess的简单使用示例
2015/07/28 Python
python实现文本界面网络聊天室
2018/12/12 Python
python实现任意位置文件分割的实例
2018/12/14 Python
利用selenium爬虫抓取数据的基础教程
2019/06/10 Python
PyQt+socket实现远程操作服务器的方法示例
2019/08/22 Python
python实现发送form-data数据的方法详解
2019/09/27 Python
Python3.7.0 Shell添加清屏快捷键的实现示例
2020/03/23 Python
关于Django Models CharField 参数说明
2020/03/31 Python
Python流程控制语句的深入讲解
2020/06/15 Python
ALDO英国官网:加拿大女鞋品牌
2018/02/19 全球购物
会计个人实习计划书
2014/08/15 职场文书
出差报告格式模板
2014/11/06 职场文书
四年级小学生评语
2014/12/26 职场文书
2015年检验员工作总结范文
2015/04/30 职场文书
加班费申请报告
2015/05/15 职场文书
运动会广播稿200字
2015/08/19 职场文书
教你用Python+selenium搭建自动化测试环境
2021/06/18 Python