重读Vue源码系列一 —— 目录结构

在阅读源码之前首先要了解下源码的目录机构。

一、生成目录结构

可以借助treer;

npm install treer -g

treer -e ./result.txt -i .git

二、生成的目录结构

D:\shali\work2\learn\vue
├─README.en.md
├─README.md
├─types
|   ├─test
├─test                             # 自动化测试相关
├─src                              # 源代码
|  ├─shared                        # 项目公用的工具代码
|  |   ├─constants.js
|  |   └util.js
|  ├─sfc                           # 单文件组件的解析代码
|  |  └parser.js
|  ├─server                        # 服务端相关代码
|  ├─platforms                     # 与平台相关代码，比如weex和web
|  |     ├─weexs
|  |     ├─web
|  ├─core                          # 通用的、与运行平台无关的运行时代码
|  |  ├─vdom                       # 与虚拟DOM相关代码
|  |  ├─util
|  |  ├─observer                   # 数据劫持相关代码
|  |  ├─instance                   # vue实例的构造函数和原型方法
|  |  ├─global-api                 # 全局api相关，如filter、directive等
|  |  ├─components                 # 内置组件，如keep-alive、component、 transition、slot等
|  ├─compiler                      # 与模板编译相关的代码
├─scripts                          # webpack配置相关
├─packages                         # webpack打包相关
├─flow                             # flow的类型声明文件
├─examples                         # 例子
├─dist                             # 编译之后的文件
├─benchmarks
├─.github
├─.circleci
|     └config.yml

（1）、compile

包含与模板编译相关的代码，负责把模板编译成ast语法树、ast语法树优化、代码生成等功能；

编译即可以在构建（需要借助vue-loader插件）的时候做也可以在运行时候做（要使用包含构建功能的vue.runtime.js库）；由于编译是耗性能的，所以建议构建时候编译。

如下是构建出来的不同库**：**

├─dist
|  ├─README.md
|  ├─vue.common.dev.js              # 完整版
|  ├─vue.common.js
|  ├─vue.common.prod.js
|  ├─vue.esm.browser.js
|  ├─vue.esm.browser.min.js
|  ├─vue.esm.js
|  ├─vue.js
|  ├─vue.min.js
|  ├─vue.runtime.common.dev.js      # 只包含运行时版
|  ├─vue.runtime.common.js
|  ├─vue.runtime.common.prod.js
|  ├─vue.runtime.esm.js
|  ├─vue.runtime.js
|  └vue.runtime.min.js

（2）、core

|  ├─core                          # 通用的、与运行平台无关的运行时代码
|  |  ├─vdom                       # 与虚拟DOM相关代码
|  |  ├─util
|  |  ├─observer                   # 数据劫持相关代码
|  |  ├─instance                   # vue实例的构造函数和原型方法
|  |  ├─global-api                 # 全局api相关
|  |  ├─components                 # 内置组件，如keep-alive、component、 transition、slot等

core是Vue的核心，目录包含了Vue的核心代码，包括内置组件（如keep-alive、component、transition-group、 transition、slot）、Vue全局API封装(filter、directive等)、Vue实例化、观察者实现、VDOM、工具函数等；

（3）、plateform

|  ├─platforms                     # 与平台相关代码，比如weex和web
|  |     ├─weexs
|  |     ├─web

Vue.js是一个跨平台的MVVM框架，既可以运行在web上，也可以配合weex运行在native客户端上。plateform是Vue.js的入口，可以分别编译成web上和weex的Vue.js库

（4）、server

服务端渲染相关代码，服务端渲染的主要工作是在服务端把模板渲染成HTML代码，节省了在浏览器端将vue模板转化为HTML以及接口请求的过程，可以提升页面的加载速度。

（5）、scf

通过vue-loader 会解析.vue文件，提取每个语言块，如有必要会通过其它 loader 处理，最后将他们组装成一个 ES Module，它的默认导出是一个 Vue.js 组件选项的对象。

（6）shared

一些vue内部公共的工具方法，会被浏览器端的Vue.js和服务端的Vue.js共享，比如

export function isPromise (val: any): boolean {
  return (
    isDef(val) &&
    typeof val.then === 'function' &&
    typeof val.catch === 'function'
  )
}
...