目录结构分析

发布时间 2023-10-01 16:21:29作者: 亦华宸
CORE
├─changelogs		// 更新日志
├─packages		// 源码和测试代码
│  ├─compiler-core		// 跨平台的框架
│  ├─compiler-dom 		// 浏览器端编译器
│  ├─compiler-sfc 		// .vue 文件解析器
│  ├─compiler-ssr 	  	// 服务端解析器
│  ├─dts-test			// 
│  ├─reactivity			// 响应式系统的实现
│  ├─reactivity-transform         // 提供响应性语法糖,听说已经被移除了,但在最新的包里面还可以看见
│  ├─runtime-core 		// 包含虚拟 DOM 渲染器、组件实现、全局的js API。
│  ├─runtime-dom  		// 对 原生DOM API、属性、样式、事件等管理。
│  ├─runtime-test 		// 用于测试 runtime-core 的轻量级运行时,仅适用于vue内部测试
│  ├─server-renderer	        // 服务端渲染的核心实现
│  ├─sfc-playground		// 与 template-explorer 类似,不仅包含 template 部分的编译,还包含了 script 与 style 部分的编译。
│  ├─shared			// 包含多个包共享的内部实用工具库
│  ├─template-explorer    	// 用于调试模板编译输出工具。
│  ├─vue  		        // vue完整包
│  └─vue-compat			// vue3 的构建版本,提供可配置的 vue2兼容行为。
└─scripts 		//编译构建代码

前期剖析源码较为重要的包:

  • compiler-core: Vue.js 是一个跨平台的框架,既可以在浏览器端编译,也可以在服务器端编译。compiler-core 包含所有与平台无关的代码转换插件
  • compiler-dom: 在浏览器端编译时,会使用 compiler-dom 提供的编译器,它是在 compiler-core 的基础上进行的封装。compiler-dom 包含了专门针对浏览器的代码转换插件
  • compiler-sfc: 用于实现 .vue 文件的解析,以及 template、script、style 的解析的相关代码都是由 compiler-sfc 模块实现的。
  • compiler-ssr: 在服务端编译时,会使用 compiler-ssr 提供的编译器。它是专门针对服务端渲染的转换插件。
  • runtime-core: 包含了与平台无关的运行时核心实现(vue核心代码),包括 虚拟DOM的渲染器、组件实现和一些全局的 JS API
  • runtime-dom: 基于 runtime-core 创建的以浏览器为目标的运行时,包括对原生 DOM API、属性、样式、事件等管理
  • reactivity: 包含响应式系统的实现,是 runtime-core 包的依赖,也可以作为与框架无关的包独立使用。
  • server-renderer: 包含服务端渲染的核心实现,是用户在使用 Vue.js 实现服务端渲染时所需要依赖的包。