Vue源码二次解析【理论】1------Vue构建过程

在前一个系列中，结合源码，我已经分析的很详细了。这一个系列主要是想通过理论，从函数的角度来了解每个过程的形成。在本篇以及接下来的篇章中所有的分析只是基于Web这个层面。

---

Vue的源码构建过程主要依赖build.js这个文件，而运行这个文件的相关配置主要存放在config.js文件中，这次着重就这两个文件做一个简单的分析。先来看一个整体的流过程：

在build.js中构建的主要依赖于build这个函数，build函数需要一个参数，这个参数在build.js中进行处理。借助于getALLBuilds这个方法取得config.js中的具体配置，再借由filter这个方法进行过滤，将处理后的参数传入build函数中进行构建。另一方面，在config.js中，所有的配置是借由resolve()这个函数开始的；通过这个函数在alias.js中取得一个键值，再根据对应的键值路径去到src下的具体目录，将对应的文件放在genConfig()中进行标准化处理，从而构建出一个新的config对象。返回build.js。通过filter函数进行过滤；然后开始打包。打包完成后的文件会放在dist目录下。

至此，就是Vue构建的全过程，其中红色字体表示涉及的源码JS文件，黄色表示函数，蓝色表示方法。后续的文章中也是这种表示方法，本文涉及的js文件的源码的github地址如下：

https://github.com/vuejs/vue/blob/dev/scripts/build.js

https://github.com/vuejs/vue/blob/dev/scripts/config.js

https://github.com/vuejs/vue/blob/dev/scripts/alias.js