深入解析 Vue 源码目录及构建过程分析

Vue.js 是一款非常流行的 JavaScript 前端框架，它的源码构建过程非常复杂，接下来我们将会一步步地解析 Vue 的源码目录及构建过程。

项目结构

首先我们来看一下 Vue.js 的源码目录结构：

├── build              // 构建相关的文件
├── dist               // 构建后文件的输出目录
├── examples           // 例子和测试文件
├── flow               // Flow 类型声明
├── packages           // 单独发布的包的源代码
├── test               // 测试文件
├── src                // 源代码目录
│   ├── compiler       // 编译相关代码
│   ├── core           // 核心代码
│   ├── platforms      // 不同平台的支持代码
│   ├── server         // 服务端渲染相关代码
│   ├── sfc            // 单个文件组件 `.vue` 文件解析相关
│   ├── shared         // 共享代码
│   └── web            // 普通浏览器相关的支持代码
├── types              // TypeScript 类型声明
├── benchmarks         // 基准测试代码
├── examples           // 例子和测试文件
├── package.json       // 项目配置文件
└── README.md          // 项目说明文档

根据上面的目录结构，我们可以看出 Vue.js 的源码主要分为四个部分：编译相关的代码、核心代码、不同平台的支持代码和服务端渲染相关的代码。

构建过程

Vue.js 应用了大量的工程化实践，在构建过程中主要采用了 Rollup 和 webpack 两个工具。

Rollup

Rollup 是一个 JavaScript 模块打包器，与 webpack 最大的不同就是 Rollup 只能处理 JavaScript 模块，而不支持其他类型的模块。Vue.js 在源码构建的过程中大量采用了 Rollup 的功能：

处理入口文件；
仅支持 ES6 模块，并将其输出为一个 JavaScript 文件；
采用 Tree-shaking 的思想，去除没有使用的代码；
生成 UMD 模块、CommonJS 模块和 ES6 模块三种不同格式的代码文件。

webpack

webpack 是一个打包工具，Vue.js 又配合使用 webpack 完成了以下构建过程：

编译 Vue 模板；
使用 postcss 进行 CSS 处理；
支持在代码中使用 ES6+ 特性，使用 babel 转换成兼容的代码；
生成浏览器可识别代码和生产环境需要的代码。

示例说明1：处理入口文件

我们使用如下命令运行 Vue.js 项目：

npm run dev

在 package.json 配置文件的 scripts 属性中定义了 dev 命令："dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev"。

在上面的命令中，rollup 即为 Rollup 工具，其中 -w 参数表示监视文件改动并重新构建，-c 参数表示要使用的配置文件，--sourcemap 表示生成 sourcemap 文件，--environment 参数则是将定义的变量传递给 Rollup 配置文件。

通过以上命令，Rollup 会自动查找 Vue.js 项目入口文件，然后开始打包。

示例说明2：编译 Vue 模板

在 Vue.js 中，编译模板的代码都在 compile 文件夹下。如果编写了如下 Vue 组件：

<template>
  <div>
    <p>{{ text }}</p>
    <p v-if="visible">we are the champions</p>
  </div>
</template>

<script>
export default {
  data() {
    return {
      text: 'Hello, World!',
      visible: true
    }
  }
}
</script>

<style>
p {
  font-size: 18px;
}
</style>

那么在编译阶段，模板编译器将会将上面的模板编译成一个对象，在 vm 中执行时会用到这个对象，这个对象包含了解析后的指令对应的代码，指令的执行依赖 render 函数运行结果，也就是 VDOM 生成的结果，接下来会通过 webpack 的 vue-loader 处理这个组件。