Vue 源码分析 -- 我该从哪里入手？

Vue 源码分析 -- 我该从哪里入手？

我想要读读源码，想要通过读一遍源码更好的理解 Vue 的特性，想要通过读一遍源码领略一下框架的风采。这个想法要求我必须完整的，全面的读一遍 Vue 的源码。

但是当我拿到 Vue 源码时忽然发现不知道该从哪里入手了。那么多文件夹，哪个才是 Vue 实例部分？又都有什么作用？那么多文件，哪个文件才是入口文件？哪里才是核心部分？哪里是骨架？哪里是分支模块？

从哪里开始，到哪里去？

通过官网，我了解到 Vue 按照不同的打包方式，按照不同的模块需求有多重编译方式，也对应多个编译文件。从基础功能上划分，就分为运行时版本和完整版本。由此可见其核心在运行时模块。

image.png

接下来就是去找运行时模块的入口了。为了适配当前主流的模块化方案，Vue 的打包方案又分为 UMD，CommomJS，ES Module(基于构建工具使用）、ES Module(基于浏览器) 。

image.png

根据自己想要了解的侧重点，选择从哪种方式入手都可以，不同的打包方式和功能模块会影响到 Vue实例构建过程中的功能注入。我选择从 ES Module(基于构建工具) 开始，以运行时代码为目标。顺便了解更多这条线上的相关知识。

那么我接下来的目标是通过 ES Module 的构建命令，找到总的入口文件，然后再找运行时模块的入口文件，然后开始盘她。

找到目标(路径)

思路有了，那么接下来可是行动。打开 package.json 文件。找到 scripts 部分，这里是打包命令，虽然命令很多，不过 build 命令才是主角，三个build 命令，第一个是普通的打包，第二是 ssr 服务端渲染打包方案(暂时不考虑)，第三个是 weex 的打包方案(暂时不考虑)，最终都指向 "scripts/build.js" 文件。(其他命令大多最终也都指向 build 命令)

image.png

script 文件夹目录如下，这里包含了各种方案的配置：

image.png

script/build.js 文件是 build 的入口文件，这里包含了输入文件，输出文件，文件路经等打包配置。 代码中这一行代码告诉我 script/config.js 包含了全部的配置方案。

let builds = require('./config').getAllBuilds()

打开 script/config.js 文件，确实有好多配置，这里只贴出我需要的，由此可见下一步就是 'web/entry-runtime.js' 文件了。

const builds = {
    // Runtime only ES modules build (for bundlers)
  'web-runtime-esm': {
    entry: resolve('web/entry-runtime.js'),
    dest: resolve('dist/vue.runtime.esm.js'),
    format: 'es',
    banner
  },
  ...
}

alias 文件中配置了web文件夹是指向 "src/platforms/web" 的：

module.exports = {
  vue: resolve('src/platforms/web/entry-runtime-with-compiler'),
  compiler: resolve('src/compiler'),
  core: resolve('src/core'),
  shared: resolve('src/shared'),
  web: resolve('src/platforms/web'),
  weex: resolve('src/platforms/weex'),
  server: resolve('src/server'),
  sfc: resolve('src/sfc')
}

找到 "src/platforms/web/entry-runtime.js" 文件，这里只有两行代码：

import Vue from './runtime/index'

export default Vue  

打开 './runtime/index' 文件，这里已经是 Vue 实例的构建部分了。找到正文！虽然这里依然不是 Vue 实例的初始化部分，但是这里已经是最外层的 Vue 实例构建了。继续在往下追两层可以发现，Vue 的构建方案是按照功能、平台、打包方式等需求逐层构建，各个功能模块根据需求可插拔的。而非一次性构建完成。由此可以看出 Vue 循序渐进的构建过程，正如作者所言，这是一个有着平滑学习曲线的框架。

既然是一层一层构建，那么我们应该从最里层开始，还是从最外层开始呢？

从常规角度看，应该是先小后大，从核心模块开始，然后一层一层的给 Vue 穿衣服。但是在我之前尝试直接读核心模块代码的时候，发现核心部分会用到很多外层的接口，结果就是一脸懵逼。所以有时候读一行代码，可能要往外找n个文件，甚至找到了打包构建模块，此时又觉得是先构建环境然后才写的 Vue 核心部分代码。结果进度会很慢，而且有些地方会很难理解。

这次从最外层开始阅读，验证下是否是先理解构建环境然后再理解核心部分。

至此，我找到了我应该分析这个庞大体系中的哪一部分功能代码以实现我想要理解 Vue 特性的目的 —— 运行时模块，找到了改从哪个文件开始 —— "src/platforms/web/runtime/index"，找到了理解 Vue 源码的顺序 —— 像洋葱一样一层一层剥开，然后吃掉！

那么接下来。开始吃洋葱！