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获取服务器时间的两个简单方法
Jan 08 Javascript
JavaScript中的一些定位属性[图解]
Jul 14 Javascript
JavaScript中获取未知对象属性的代码
Apr 27 Javascript
jquery实现弹出div,始终显示在屏幕正中间的简单实例
Mar 08 Javascript
js实现缓冲运动效果的方法
Apr 10 Javascript
jQuery的each循环用法简单示例
Jun 12 Javascript
JavaScript兼容浏览器FF/IE技巧
Aug 14 Javascript
BootStrap Validator使用注意事项(必看篇)
Sep 28 Javascript
js放大镜放大购物图片效果
Jan 18 Javascript
angularJs提交文本框数据到后台的方法
Oct 08 Javascript
fetch 如何实现请求数据
Dec 20 Javascript
Openlayers实现扩散的动态点(水纹效果)
Aug 17 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 正则表达式的学习探讨
2013/06/06 PHP
ThinkPHP写数组插入与获取最新插入数据ID实例
2014/11/03 PHP
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
jQuery点击tr实现checkbox选中的方法
2013/03/19 Javascript
框架页面高度自动刷新的Javascript脚本
2013/11/01 Javascript
jQuery实现的右下角广告窗体跟随效果示例
2016/09/16 Javascript
jQuery中delegate()方法的用法详解
2016/10/13 Javascript
使用开源工具制作网页验证码的方法
2016/10/17 Javascript
React中ES5与ES6写法的区别总结
2017/04/21 Javascript
JS实现数组按升序及降序排列的方法
2017/04/26 Javascript
Angular2入门教程之模块和组件详解
2017/05/28 Javascript
vue柱状进度条图像的完美实现方案
2019/08/26 Javascript
vue 路由懒加载中给 Webpack Chunks 命名的方法
2020/04/24 Javascript
基于jsbarcode 生成条形码并将生成的条码保存至本地+源码
2020/04/27 Javascript
微信小程序连接服务器展示MQTT数据信息的实现
2020/07/14 Javascript
Vue页面手动刷新,实现导航栏激活项还原到初始状态
2020/08/06 Javascript
[16:19]教你分分钟做大人——风暴之灵
2015/03/11 DOTA
解决Scrapy安装错误:Microsoft Visual C++ 14.0 is required...
2017/10/01 Python
python增加矩阵维度的实例讲解
2018/04/04 Python
python实现最大子序和(分治+动态规划)
2019/07/05 Python
python实现拉普拉斯特征图降维示例
2019/11/25 Python
Python如何进行时间处理
2020/08/06 Python
如何利用Python 进行边缘检测
2020/10/14 Python
CSS中几个与换行有关的属性简明总结
2014/04/15 HTML / CSS
在HTML5中使用MathML数学公式的简单讲解
2016/02/19 HTML / CSS
澳大利亚最大的网上油画销售画廊:Direct Art Australia
2018/04/15 全球购物
大学毕业生通用求职信
2013/09/28 职场文书
社区十八大感言
2014/01/19 职场文书
接受捐赠答谢词
2014/01/27 职场文书
中式结婚主持词
2014/03/14 职场文书
一年级学生期末评语
2014/04/21 职场文书
2015年党风廉政建设目标责任书
2015/05/08 职场文书
圣贤教育改变命运观后感
2015/06/16 职场文书
2015大一新生军训感言
2015/08/01 职场文书
Python基于百度AI实现抓取表情包
2021/06/27 Python
详细了解java监听器和过滤器
2021/07/09 Java/Android