Vue3源码梳理：源码目录结构及源码阅读方法

2023-12-13 07:20:10

VUE3 源码目录结构

1 ) 下载源码三种方式

  • 方式1，Download ZIP，不推荐
  • 方式2，通过https,或ssh或github cli来克隆项目
    • $ git clone https://github.com/vuejs/core.git
    • $ git clone git@github.com:vuejs/core.git
  • 方式3，点击Fork, 到自己仓库，再执行上面两步的方式下载

2 ）源码目录解析

  • tsconfig.json ts 配置文件
  • rollup.config.js rollup 配置文件
  • packages 包
    • compiler-core: 编译器的核心库
    • compiler-dom: 编译器浏览器相关
    • compiler-ssr: 服务端渲染的编译模块
    • compiler-sfc: .vue组件的编译模块
    • reactivity: 响应性的核心模块
    • reactivity-transform: 已过期的模块，无需过于关注
    • runtime-core: 运行时核心库，内部针对不同平台进行实现
    • runtime-dom：基于浏览器的运行时
    • runtime-test：测试用的
    • server-renderer：服务端渲染库
    • sfc-playground：sfc 工具，暂时无需关注，参考：https://sfc.vuejs.org
    • shared: 存放共享工具方法等
    • size-check: 运行时包大小的检查库，暂无需关注
    • template-explorer: 提供的线上测试，暂无需关注，https://template-explorer.vuejs.org, 用于把template转化为render
    • vue: 包含测试实例，以及打包后的dist文件，src中对外暴露入口的方法
    • vue-compat: vue2的兼容性代码，以及vue的合并代码
    • global.d.ts 全局的ts声明
  • netlify.toml 自动化部署相关
  • jest.config.js 测试相关
  • api-extractor.json ts的api分析工具
  • SECURITY.md 报告漏洞，维护安全的声明
  • CHANGELOG.md 更新日志
  • BACKERS.md 赞助声明
  • test-dts 测试相关
  • scripts 配置文件相关
  • pnpm-workspace.yaml pnpm 相关配置
  • pnpm-lock.yaml 使用 pnpm 下载的依赖包版本锁文件

创建测试 实例

1 ） 需要全局安装下 pnpm

  • pnpm.io/zh/motivation
  • 安装完成，直接执行 pnpm i
  • 之后运行：npm run build
  • 编写我们的用例，在vue/examples下新建我们测试的代码目录
    • 新建reactivity目录, 在其下新建 reactive.html
    • 编写如下代码

2 ）编写简单测试代码

<script src='../../dist/vue.global.js'></script>

<body>
  <div id='app'></div>
</body>

<script>
  const { reactive, effect } = Vue
  const obj = reactive({
    name: '张三'
  })
  effect(()=>{
    document.querySelector('#app').innerText = obj.name
  })
  const timer = setTimout(() => {
    clearTimeout(timer)
    obj.name = '李四'
  })
</script>

3 ）开启sourceMap

  • 只有开启sourceMap才能进行debugger
  • 这样，我们就可以借助sourceMap查看打包之前的代码，而非打包之后的代码
  • 我们打包用的命令在package.json中，是：node scripts/build.js
  • 在这个文件中，我们可以看到: sourceMap ? SOURCE_MAP:true : ``, 这里开启 sourceMap的关键就在这个变量里
  • 这里的代码：SOURCE_MAP:true 最终会被 rollup 构建
  • 在rollup.config.js 中包含sourceMap的逻辑，大概在94行
  • output.sourcemap = !!process.env.SOURCE_MAP
  • 这个变量 sourcemap 在 build.js中是取决于 args.sourcemap 或 args.s
  • 而 args 是在使用了 minimist 库来生成的：const args = require('minimist')(process.argv.slice(2))
  • 这个 minimist 包是在 npmjs.com/package/minimist 中 查看 example
  • 而在vue中开启sourceMap, 其实非常简单，只需要在build命令后面添加 -s 参数即可
    • "build": "node scripts/build.js -s"

4 ） 进行debugger

  • 基于之前的live-server打开的http访问的页面：http://127.0.0.1:5500/**/code/vue-next-3.2.37/packages/vue/examples/reactivity/reactive.html
    • 我们点击chrome的Sources面板，向下可看到Page, Filesystem子面板，选择Page面板，查看当前页面对应的html文件里的代码，我们可看到 reactive.html 文件
    • 只有这一个html文件以及dist/vue.global.js的js文件
  • 重新运行 build 命令, 在dist目录中，发现生成了一些 map.js 文件
    • 同样，按上述步骤操作，查看 Page 子面板，等一会儿发现，同步了一堆文件：
    • vue, compiler-core/src, compiler-dom/src, reactivity/src, runtime-core/src, runtime-dom/src, shared/src
  • 现在我想调试，如上代码中的 reactive api, 我在 reactivity/src/reactive.ts 中找到 reactive 函数并打上一个断点，即可调试了

如何阅读源码

1 ) 关于误区

  • 误区：
    • 把源代码中的每一行代码都读明白，这会导致 事倍功半
  • 正确：
    • 摒弃边缘情况，仅阅读核心逻辑，一些边缘的和一些条件可适当忽略
    • 跟随一条主线, 下面三大块不是同时的，而是跟着一条线来走完
      • 响应性
      • 运行时
      • 编译器

2 ）关于调试流程

  • 基于上述源码，我们可以测试我们的功能
  • 但是为了研究出具体的功能，我们可以自行搭建一套类似vue的框架来简化核心流程

文章来源:https://blog.csdn.net/Tyro_java/article/details/134916046
本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。