Vue源码解读(四)

本篇介绍vue源码项目的大概文件结构，其实在其github上即有一个大概的介绍，https://github.com/vuejs/vue/blob/dev/.github/CONTRIBUTING.md 英文水平可以的同学可以直接看。

题外话一句，vue这样的开源项目在贡献规则文档的说明上还是很完善的，其中包括有如何提bug,如何提PR,开发环境搭建以及目录结构说明等。

├── build --------------------------------- 构建相关的文件，一般情况下我们不需要动
├── dist ---------------------------------- 构建后文件的输出目录
├── examples ------------------------------ 存放一些使用Vue开发的应用案例
├── flow ---------------------------------- 类型声明，使用开源项目 [Flow](https://flowtype.org/)
├── package.json -------------------------- 不解释
├── test ---------------------------------- 包含所有测试文件
├── src ----------------------------------- 这个是我们最应该关注的目录，包含了源码
│   ├── entries --------------------------- 包含了不同的构建或包的入口文件
│   │   ├── web-runtime.js ---------------- 运行时构建的入口，输出 dist/vue.common.js 文件，不包含模板(template)到render函数的编译器，所以不支持 `template` 选项，我们使用vue默认导出的就是这个运行时的版本。大家使用的时候要注意
│   │   ├── web-runtime-with-compiler.js -- 独立构建版本的入口，输出 dist/vue.js，它包含模板(template)到render函数的编译器
│   │   ├── web-compiler.js --------------- vue-template-compiler 包的入口文件
│   │   ├── web-server-renderer.js -------- vue-server-renderer 包的入口文件
│   ├── compiler -------------------------- 编译器代码的存放目录，将 template 编译为 render 函数
│   │   ├── parser ------------------------ 存放将模板字符串转换成元素抽象语法树的代码
│   │   ├── codegen ----------------------- 存放从抽象语法树(AST)生成render函数的代码
│   │   ├── optimizer.js ------------------ 分析静态树，优化vdom渲染
│   ├── core ------------------------------ 存放通用的，平台无关的代码
│   │   ├── observer ---------------------- 反应系统，包含数据观测的核心代码
│   │   ├── vdom -------------------------- 包含虚拟DOM创建(creation)和打补丁(patching)的代码
│   │   ├── instance ---------------------- 包含Vue构造函数设计相关的代码
│   │   ├── global-api -------------------- 包含给Vue构造函数挂载全局方法(静态方法)或属性的代码
│   │   ├── components -------------------- 包含抽象出来的通用组件
│   ├── server ---------------------------- 包含服务端渲染(server-side rendering)的相关代码
│   ├── platforms ------------------------- 包含平台特有的相关代码
│   ├── sfc ------------------------------- 包含单文件组件(.vue文件)的解析逻辑，用于vue-template-compiler包
│   ├── shared ---------------------------- 包含整个代码库通用的代码

以上是个主要文件的大概介绍。其他一些次要文件如.babel这里有以下几点需要补充说明

###1.package.json
只说一点，scripts字段下的内容需要额外注意下，其中的dev，build，test，flow。

# watch and auto re-build dist/vue.js
$ npm run dev
 
# watch and auto re-run unit tests in Chrome
$ npm run dev:test
 
# build all dist files, including npm packages
$ npm run build
 
# run the full test suite, include linting / type checking
$ npm test

###2.flow
flow使用在上篇中已经提过，文件夹下主要是一些类的属性声明，作者已经按照类别分别放到了不同的文件中

├── flow
│   ├── compiler.js -------------------------- 与编译相关的如CompilerOptions，CompiledResult，ASTModifiers，ASTIfConditions等类型的声明
│   ├── component.js ------------------------- 即Component的类型声明。每个component的结构都如此，结构比较复杂，包括属性及函数等
│   ├── global-api.js ------------------------ 挂载到Vue上的全局函数和属性，如Vue.extend, Vue.set等
│   ├── modules.js --------------------------- 内部用到的一些module的接口说明，如he,source-map,lru-cache,vue-ssr-html-stream等
│   ├── options.js --------------------------- 各类option的属性说明，如InternalComponentOptions，ComponentOptions，PropOptions
│   ├── ssr.js ------------------------------- （server side rendering）服务端渲染用到的几个类的接口说明
│   └── vnode.js ----------------------------- 虚拟节点结构数据

###3.src目录
该目录下的是重点，而阅读时， src/core下的又是重中之重。
compiler目录主要负责编辑dom结构的渲染函数
entries是不同构建目标时不同的编辑入口
platform是不同平台下的额外处理，其他的不再赘言。