深刻vue - 源码目录及构建过程分析

“ 本文主要梳理一下vue代码的目录，以及vue代码构建流程，旨在对vue源码总体有一个认知，有助于后续对源码的阅读。”

01

—

目录结构

上图是对vue的代码的全部目录进行的梳理，其中源码位于src目录下，下面对src下的目录进行介绍。

compiler

该目录是编译相关的代码，即将 template 模板转化成 render 函数的代码。

vue 提供了 render 函数，render 函数做用是用来建立 VNode，但在平时开发中，绝大多数状况下使用 template 来建立 HTML，因此须要将 template模板编译成 render 函数。

编译工做既能够在代码构建时作，也能够在客户端运行时作，但编译十分消耗性能，因此在项目中建议使用 runtime 版本。

core

这部分代码是 vue 的核心代码，能够说是 vue 的灵魂所在，也是咱们要重点学习的源码。

core目录又包含以下子目录。

• components -- 内置组件的代码，即 keep-alive 代码

• global-api -- 全局API代码，mixin，extend 等 api 在这里实现

• instance -- vue实例化相关代码，包括初始化，事件，生命周期，渲染等部分的代码

• observer -- 响应式数据相关代码

• util -- 工具方法

• vdom -- 虚拟 dom 的代码。

platforms

platforms下包含两个子目录，web 和 weex。

分别表明能够打包生成在web端使用的 vue 代码和在native端使用的 weex 代码。美团开源的开发微信小程序的 mpvue 框架也是在这个目录下进行拓展的。

经过不一样平台的入口就能够打包出运行在不一样平台的版本的 vue 文件，后面代码构建部分会介绍具体的构建过程。

server

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

Vue.js 是构建客户端应用程序的框架。除了能够在浏览器中输出 Vue 组件，也能够将同一个组件渲染为服务器端的 HTML 字符串，将它们直接发送到浏览器，最后将这些静态标记"激活"为客户端上彻底可交互的应用程序。

sfc

咱们平时开发时，都是写 .vue 文件。sfc 的代码就是提供一个解析器，把.vue文件代码解析成一个 javascript 对象。

shared

该目录下定义了一些公用的工具方法，提供给上面的几个目录内代码使用。

02

—

源码编译

vue的源码按照功能拆分的十分清晰，每一个功能都有单独的目录，那么项目中引用的vue文件是怎么编译出来的呢？

首先，咱们看一下编译输出的dist目录。

能够看到，dist下有10几种不一样版本的vue文件，他们是根据不一样规范（包括 CommonJS规范，ES Module，UMD）和 是否包含编译器 构建出的不一样版本。

vue源码选择了rollup进行构建，rollup相比于webpack，更加轻量，编译后的代码更加干净，更适合javascript库的构建，除了vue之外，像React，Ember，D3，Three.js 以及其余不少开源库也选择了Rollup 进行构建。

下面看一下vue具体构建过程，首先到pakage.json中看下vue编译执行的命令。

从命令能够看出，构建命令就是执行 scripts 目录下 build.js 文件。

下面是 scripts/build.js 核心代码

从代码能够看出，首先经过 script/config.js 文件的getAllBuilds方法获取配置，而后根据构建命令传入的参数对配置进行过滤，最后根据过滤后的配置执行build函数，编译出对应版本的vue文件。

(这里介绍代码构建的过程，主要说明vue是怎么构建出不一样版本代码的，build方法在此不作分析)

接下来咱们在看一下配置文件 script/config.js 中的 getAllBuilds 是怎么获取具体配置的。

能够看出，getAllBuilds 方法首先经过 Object.keys 拿到 builds 对象全部key的组成的数组，并经过map遍历执行genConfig方法。下面咱们先看一下builds对象。

能够看出，builds对象是不一样版本vue的编译配置。具体配置项的做用，已经用注释在代码中标出。接下来咱们看下genConfig函数作了什么。

genConfig 经过 key 拿到 builds 中每一个key对应的配置对象，而后根据这个对象从新定义一个 config 对象，这个 config 对象的结构才是 rollup 配置真正须要的结构。

看了 builds 对象和 genConfig 方法，咱们就知道了 getAllBuilds 的目的，是经过映射把 builds 配置对象转化成 rollup 所须要的配置数据。

到这里，咱们就清楚是如何构建出不一样版本的vue代码了。

03

—

心得

学习源码时，不建议按照源码的顺序一行一行的阅读。首先要抓住主干，先梳理清楚主要的代码逻辑，再去仔细阅读具体的每行代码。另外按照源码顺序阅读可能很枯燥，很难坚持下来，能够先选择本身感兴趣的部分进行学习，最后再串联起来。

若是喜欢本文请扫描关注公众号前端小苑