“本文主要梳理了vue代码的目录和vue代码的构建过程，旨在对整个vue源代码有一个了解，有利于后续阅读源代码。”

一、目录结构

上图是整理vue代码的所有目录，其中源代码位于src目录，下面介绍src下的目录。

编译程序

这个目录是编译的代码，也就是把模板模板转换成渲染函数的代码。

Vue提供了一个渲染函数，用来创建VNode。但是在正常的开发中，大多数情况下都是使用模板来创建HTML，所以需要将模板编译成渲染函数。

编译可以在构建代码时完成，也可以在客户端运行时完成，但是编译会消耗大量性能，因此建议在项目中使用运行时版本。

核心

这部分代码是vue的核心代码，可以说是vue的灵魂，也是我们应该重点关注的源代码。

核心目录包含以下子目录。

组件——内置组件的代码，即保活代码

这里实现了全局api -全局api代码、mixin、extend和其他api

实例- vue实例化相关代码，包括初始化、事件、生命周期、呈现和代码的其他部分

与响应数据相关的观察者代码

实用工具方法

vdom -虚拟dom的代码。

平台

平台下有两个子目录，web和weex。

它们分别代表了web端使用的vue代码和原生端使用的weex代码。美团开源开发微信小程序的mpvue框架也在这个目录下进行了扩展。

不同平台上运行的Vue文件可以通过不同平台的门户进行打包，具体的构建过程将在后面的代码构建部分介绍。

计算机网络服务器

该目录下是与SSR相关的代码。

Vue.js是一个构建客户端应用程序的框架。除了在浏览器中输出Vue组件，还可以在服务器端将同一个组件渲染为HTML字符串，直接发送到浏览器，最后在客户端将这些静态标签‘激活’为完全交互式的应用。

表面（同surface）

当我们发展时，我们总是写作。vue文件。sfc代码是提供一个解析器来解析。vue文件代码转换成javascript对象。

共享的

本目录中定义了一些常用的工具和方法，可以供上述目录中的代码使用。

二、源代码编译

vue的源代码按照功能划分得很清楚，每个功能都有自己的目录。项目中引用的vue文件是如何编译的？

首先，让我们看看编译输出的dist目录。

可以看到dist下有10多个不同版本的vue文件，根据不同的规范(包括CommonJS规范、ES Module、UMD)以及是否包含编译器来构造。

选择汇总来构建vue源代码。与webpack相比，rollup更轻，编译后的代码更干净，更适合构建javascript库。除了vue，其他开源库如React、Ember、D3、Three.js等也选择Rollup来构建。

我们来看看vue的具体搭建过程。首先，看看vue在pakage.json中编译和执行的命令

从命令中可以看出，build命令是执行scripts目录中的build.js文件。

以下是scripts/build.js的核心代码(为了方便自己理解，下面补充了汉字注释部分)

从代码中可以看出，首先通过script/config.js文件的getAllBuilds方法获取配置，然后根据build命令传入的参数对配置进行过滤，最后根据过滤后的配置执行build函数，编译相应版本的vue文件。(本文介绍了代码构建的过程，主要说明vue如何构建不同版本的代码，这里不分析构建方法。)

接下来，让我们看看配置文件script/config.js中的getAllBuilds是如何获取特定配置的。

可以看到，getAllBuilds方法首先通过Object.keys获取Builds对象的所有键组成的数组，并通过map遍历执行genConfig方法。让我们先来看看建筑物对象。

可以看出，buildings对象是不同版本vue的编译配置。特定配置项的功能已在代码中用注释标记。接下来，让我们看看genConfig函数是做什么的。

GenConfig通过key获取建筑物中每个key对应的配置对象，然后根据这个对象重新定义一个Config对象。这个配置对象的结构是汇总配置真正需要的结构。

查看Builds对象和genConfig方法，我们知道getAllBuilds的目的是通过映射将builds配置对象转换为汇总所需的配置数据。

此时，我们知道如何构建不同版本的vue代码。

第三，体验

学习源代码时，不建议按照源代码的顺序逐行阅读。首先要抓主干，先梳理主要代码逻辑，再仔细阅读每一行的具体代码。另外，按照源代码顺序阅读可能比较枯燥，很难坚持下去。可以先选择自己感兴趣的部分进行研究，然后串联起来。