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

 更新时间:2019年10月13日 09:13:24   作者:徐志伟酱  
这篇文章主要介绍了Vue3.x源码调试的实现方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

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

断点调试

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

如何调试vue3.x的ts源码

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

 

如果这是你想要的调试效果,下面请看下如何生成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__下的案列,自己进行调试学习。(额,好像说了好几句...)

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

相关文章

  • 解决vue项目运行出现warnings potentially fixable with the `--fix` option的报错问题

    解决vue项目运行出现warnings potentially fixable with the `--fix

    这篇文章主要介绍了解决vue项目运行出现warnings potentially fixable with the `--fix` option的报错问题,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2021-11-11
  • 快速处理vue渲染前的显示问题

    快速处理vue渲染前的显示问题

    下面小编就为大家分享一篇快速处理vue渲染前的显示问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-03-03
  • 如何通过Vue3+Element Plus自定义弹出框组件

    如何通过Vue3+Element Plus自定义弹出框组件

    这篇文章主要给大家介绍了关于如何通过Vue3+Element Plus自定义弹出框组件的相关资料,弹窗是前端开发中的一种常见需求,文中通过代码介绍的非常详细,对大家的学习或者工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2024-05-05
  • Vue 路由返回恢复页面状态的操作方法

    Vue 路由返回恢复页面状态的操作方法

    在使用 Vue 开发前端的时候遇到一个场景在首页进行一些数据搜索,点击搜索结果进入详情页面,浏览详情页后返回主页,所以需要在返回后恢复跳转前的页面参数状态,今天通过本文给大家分享Vue 路由页面状态返回的操作方法,一起看看吧
    2021-07-07
  • 详解vee-validate的使用个人小结

    详解vee-validate的使用个人小结

    本篇文章主要介绍了详解vee-validate的使用个人小结,具有一定的参考价值,感兴趣的小伙伴们可以参考一下。
    2017-06-06
  • Vue.js 中 ref 和 reactive 的区别及用法解析

    Vue.js 中 ref 和 reactive 的区别及用法解析

    在Vue.js中,ref主要用于创建响应式的引用,通过.value属性来访问和修改值,特别适用于需要频繁更改整个值的场景,而reactive则用于创建深度响应的对象或数组,本文给大家介绍Vue.js 中 ref 和 reactive 的区别及用法,感兴趣的朋友跟随小编一起看看吧
    2024-09-09
  • Vue浏览器链接与接口参数实现加密过程详解

    Vue浏览器链接与接口参数实现加密过程详解

    这篇文章主要介绍了Vue浏览器链接与接口参数实现加密过程,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习吧
    2022-12-12
  • vue中组件<router-view>使用方法详解

    vue中组件<router-view>使用方法详解

    这篇文章主要给大家介绍了关于vue中组件<router-view>使用方法的相关资料,Vue 路由中的 <router-view/> 是用来承载当前级别下的子级路由的一个视图标签,此标签的作用就是显示当前路由级别下一级的页面,需要的朋友可以参考下
    2024-06-06
  • Vue3 使用Vuex和router的注意事项及操作方法

    Vue3 使用Vuex和router的注意事项及操作方法

    在vue2中 使用的 this.$route 和 this.$router this.$store的使用在vue3中完全适用,这篇文章主要介绍了Vue3 使用Vuex和router的注意事项及操作方法,需要的朋友可以参考下
    2022-12-12
  • 讨论vue中混入mixin的应用

    讨论vue中混入mixin的应用

    这篇文章主要介绍了vue中混入mixin的理解和应用,对vue感兴趣的同学,可以参考下
    2021-05-05

最新评论