Vue 源码初探（一）

目录结构

├── .circleci ----------------------------- 存放持续集成工具circleci的配置文件
├── .github ------------------------------- 存放README.md中关联的md文档 
├── benchmarks ---------------------------- 性能测试、评估，跑分demo，比如大数据量的table或者渲染大量SVG
├── dist ---------------------------------- 各个平台构建后文件的输出目录(UMD、CommonJS、ES 生产和开发包)
├── examples ------------------------------ 例子代码
├── flow ---------------------------------- 静态类型声明 [Flow](https://flow.org/)
├── packages ------------------------------ 包含服务端渲染和模板编译器两种不同的npm包，是提供给不同使用场景使用的
├── scripts ------------------------------- 构建相关的文件
│   ├── git-hooks ------------------------- 存放git钩子的目录
│   ├── alias.js -------------------------- 别名配置
│   ├── build.js -------------------------- 对 config.js 中所有的rollup配置进行构建
│   ├── config.js ------------------------- 生成rollup配置的文件
│   ├── feature-flags.js ------------------ 部分属性的标志
│   ├── release.sh ------------------------ 用于自动发布新版本的脚本
├── src ----------------------------------- 这个是我们最应该关注的目录，包含了源码
│   ├── compiler -------------------------- 编译器代码的存放目录，将 template 编译为 render 函数
│   │   ├── codegen ----------------------- 把AST转换为Render函数
│   │   ├── directives -------------------- 通用生成Render函数之前需要处理的指令
│   │   ├── parser ------------------------ 解析模版成AST
│   ├── core ------------------------------ 存放通用的，与平台无关的代码
│   │   ├── components -------------------- 包含抽象出来的通用组件,主要是Keep-Alive
│   │   ├── global-api -------------------- 包含给Vue构造函数挂载全局方法或属性的代码
│   │   ├── instance ---------------------- 实例化相关内容，生命周期、事件等
│   │   ├── observer ---------------------- 响应系统，包含数据观测的核心代码(双向数据绑定)
│   │   ├── util -------------------------- 工具方法
│   │   ├── vdom -------------------------- 包含虚拟DOM创建(creation)和打补丁(patching)的代码
│   ├── platforms ------------------------- 包含平台特有的相关代码，不同平台的不同构建的入口文件也在这里
│   │   ├── web --------------------------- web平台
│   │   │   ├── compiler ------------------ web端编译相关代码，将 template 编译为 render 函数
│   │   │   ├── runtime ------------------- web端运行时相关代码，用于创建Vue实例等
│   │   │   ├── server -------------------- 服务端渲染
│   │   │   ├── util ---------------------- 相关工具类
│   │   │   ├── entry-runtime.js ---------- 运行时构建的入口，不包含模板(template)到render函数的编译器，所以不支持 `template` 选项，我们使用vue默认导出的就是这个运行时的版本。大家使用的时候要注意
│   │   │   ├── entry-runtime-with-compiler.js -- 独立构建版本的入口，它在 entry-runtime 的基础上添加了模板(template)到render函数的编译器
│   │   │   ├── entry-compiler.js --------- vue-template-compiler 包的入口文件
│   │   │   ├── entry-server-renderer.js -- vue-server-renderer 包的入口文件
│   │   │   ├── entry-server-basic-renderer.js -- 输出 packages/vue-server-renderer/basic.js 文件
│   │   ├── weex -------------------------- 混合应用
│   ├── server ---------------------------- 包含服务端渲染(ssr)的相关代码
│   ├── sfc ------------------------------- 包含单文件组件(.vue文件)的解析逻辑，用于vue-template-compiler包
│   ├── shared ---------------------------- 全局共享的方法和常量
├── test ---------------------------------- 包含所有测试文件
├── types --------------------------------- 支持TypeScript，TypeScript类型声明文件
├── .babelrc ------------------------------ babel 配置文件
├── .editorconfig ------------------------- 针对编辑器的编码风格配置文件
├── .eslintignore ------------------------- eslint 忽略配置
├── .eslintrc ----------------------------- eslint 配置文件
├── .flowconfig --------------------------- flow 的配置文件
├── .gitignore ---------------------------- git 忽略配置
├── .BACKERS.md --------------------------- 赞助者信息文件
├── LICENSE ------------------------------- 项目开源协议
├── package.json -------------------------- 依赖
├── README.md ----------------------------- 说明文档
├── yarn.lock ----------------------------- yarn 锁定文件

对于目录结构并不需要在看到描述后就完完全全知道所有文件的作用，刚开始知道个大概，在源码解析的过程中慢慢去理解体会。

Vue 不同版本的构建

在 dist 输出文件夹的 REMEDE.md 中，可以看到作者给出的一个表格

	UMD	CommonJS	ES Module
Full	vue.js	vue.common.js	vue.esm.js
Runtime-only	vue.runtime.js	vue.runtime.common.js	vue.runtime.esm.js
Full (production)、	vue.min.js
Runtime-only (production)	vue.runtime.min.js

其中行上按照输出的模块形式分为 UMD、CommonJS、ES Module 三种，而列上按照环境和版本分别分成 Full、Runtime-only、Full (production)、Runtime-only (production)四种。作者按照这些分类在 dist 文件夹下构建了多个不同的文件以供使用。下面简单解释一下这些分类。

• UMD： UMD 版本可以通过