调试vue3.0源码

准备工作

1.下载源码

源码地址： https://github.com/vuejs/core.git

2.使用工具

1. vscode
2. node环境 + pnpm
2. 插件：live server

搭建调试环境

1. 使用pnpm安装源码依赖

2. 在package/vue/example文件夹中创建调试目录，并初始化npm项目

  安装依赖：
      vite,
      typescript,并初始化typescript项目，生成ts.config.json
      @types/vue // 版本要与使用的vue版本移植
      vue： workspace内部安装

3. 配置.d.ts文件，目的是编写vue测试代码时，依然有vue提示

import * as Vue from 'vue';
declare global {
interface Window {
  Vue: typeof Vue
}
}

4. 使用live server监听vue/dist目录

原因是需要开启一个静态文件服务器，否则vite启动的时候会忽略相对路径，导致加载的文件丢失

5. 修改测试项目下package.json启动命令

  dev: "vite"

6. 修改core项目下的package.json配置文件

    dev-test: "cd packages/vue/examples/my-test && npm run dev"

3. 启动测试

1. 先启动 core项目下的 dev命令
2. 然后开启liveserver服务
3. 最后执行dev-test命令，使项目启动

此时项目可进行ts直接调试源码

如果需要进行 vscode debugger代码，可以使用 debugger for chrome 进行代码追踪调试，如下图配置

{
 // Use IntelliSense to learn about possible attributes.
 // Hover to view descriptions of existing attributes.
 // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 "version": "0.2.0",
 "configurations": [
   {
     "name": "Launch Chrome",
     "request": "launch",
     "type": "chrome",
     "url": "http://localhost:5500",
     "webRoot": "${workspaceFolder}",
     "breakOnLoad": true
   }
 ]
}

效果如图