Vue源码目录和构建流程如何深入剖析？

本文共计1609个文字，预计阅读时间需要7分钟。

“以下是对Vue代码目录的简要梳理，以及Vue代码构建流程，帮助对Vue源码整体有一个认知，便于后续对源码的阅读。

一、目录结构上图是对Vue代码的所有目录进行的梳理，其中：

1. src 目录是Vue的核心源码目录，包含了Vue的编译器、运行时、构建工具等；

2.packages 目录包含了Vue的各个包，如vue-router、vuex等；

3.dist 目录是Vue编译后的代码，包括运行时和编译器；

4.test 目录是Vue的测试代码；

5.docs 目录是Vue的官方文档。

二、Vue代码构建流程

1.编译器（Compiler）：将模板编译成渲染函数；

2.运行时（Runtime）：提供核心的响应式和组件系统；

3.构建工具（Build Tools）：将源码编译成不同环境下的代码。

具体流程如下：

1.使用Babel将源码转换成ES5代码；

2.使用Webpack打包编译后的代码；

3.使用Rollup打包编译器代码；

4.使用UglifyJS压缩打包后的代码。

通过以上步骤，Vue源码被转换成可以在不同环境下运行的代码，便于开发者使用。

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

一、目录结构

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

compiler

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

vue 提供了 render 函数，render 函数作用是用来创建 VNode，但在平时开发中，绝大多数情况下使用 template 来创建 HTML，所以需要将 template模板编译成 render 函数。