• vue3在线编译调试：Vue Template Explorer

Vue3源码目录结构

├── .circleci // CI 配置目录
├── .ls-lint.yml // 文件命名规范
├── .prettierrc // 代码格式化 prettier 的配置文件
├── CHANGELOG.md  // 更新日志
├── LICENSE    // MIT协议是所有开源许可中最宽松的一个，除了必须包含许可声明外，再无任何限制。
├── README.md    项目说明
├── api-extractor.json // TypeScript 的API提取和分析工具
├── jest.config.js  //  测试框架 jest 的配置文件
├── node_modules
├── package-lock.json
├── package.json  // 项目依赖
├── packages // Vue源代码目录
├── rollup.config.js  // 模块打包器 rollup 的配置文件
├── scripts  //Vue3 的脚本文件，用来存放配置文件，进行编译和打包
├── test-dts // TypeScript 声明文件
├── tsconfig.json // TypeScript 配置文件
└── yarn.lock  // 此会锁定安装的每个依赖的版本，可以确保不会意外获得不良依赖；并且会避免由于开发人员意外更改或则更新版本，而导致糟糕的情况！

Vue3 的源码存放在 package 文件夹下面：

├── compiler-core // 顾名思义，核心中的核心，抽象语法树和渲染桥接实现,与平台无关的编译器核心。包括编译器的可扩展基础和所有与平台无关的插件。
├── compiler-dom // Dom的实现
├── compiler-sfc // Vue单文件组件(.vue)的实现
├── compiler-ssr // 生成针对服务器端渲染优化的渲染函数的编译器。
├── global.d.ts  // 声明文件
├── reactivity  // 响应式系统的实现,Composition API 的核心
├── runtime-core // 与平台无关的运行时核心。专门用于自定义 renderer
├── runtime-dom // 针对浏览器的运行时。包括原生 DOM API、属性、属性、事件处理程序等的处理,主要功能是适配了浏览器环境下节点和节点属性的增删改查。
├── runtime-test // 用对象来表示 DOM 树，方便测试
├── server-renderer // 服务端渲染实现
├── shared  // package 之间共享的工具库,内部实用函数和常量共享
├── size-check // 私有包，用于检查 tree-shaking 后的运行时大小
├── template-explorer // 用于调试编译器输出的开发工具
└── vue  //面向公众的“完整构建”，包括运行时和编译器。主入口

• compile 理解为程序编绎时，是指我们写好的源代码在被编译成为目标文件这段时间，但我们可以通俗的看成是我们写好的源代码在被转换成为最终可执行的文件这段时间，在这里可以理解为我们将.vue文件编绎成浏览器能识别的.html文件的一些工作
• runtime 可以理解为程序运行时，即是程序被编译了之后，打开程序并运行它直到程序关闭的这段时间的系列处理

模块关系图

+---------------------+
                                    |                     |
                                    |  @vue/compiler-sfc  |
                                    |                     |
                                    +-----+--------+------+
                                          |        |
                                          v        v
                      +---------------------+    +----------------------+
                      |                     |    |                      |
        +------------>|  @vue/compiler-dom  +--->|  @vue/compiler-core  |
        |             |                     |    |                      |
   +----+----+        +---------------------+    +----------------------+
   |         |
   |   vue   |
   |         |
   +----+----+        +---------------------+    +----------------------+    +-------------------+
        |             |                     |    |                      |    |                   |
        +------------>|  @vue/runtime-dom   +--->|  @vue/runtime-core   +--->|  @vue/reactivity  |
                      |                     |    |                      |    |                   |
                      +---------------------+    +----------------------+    +-------------------+

修改 package.json

和之前一样，想要阅读 Vue3 的源码需要修改一下package.json

"dev": "node scripts/dev.js"

修改为：

"dev": "node scripts/dev.js --sourcemap --environment TARGET:web-full-dev"

这句的主要作用就是在我们开启调试模式，能够在浏览器看到我们的源码。