Vue框架源码工程化及构建流程

作为前端框架三剑客之一的Vuejs，在各大公司前端项目开发中占据了重要位置，不管你是新人还是资深前端，如果了解框架本身的运行机制，就能很好的运用框架，扩展框架能力，并且能及时解决项目开发中遇到的神坑，下面我们从源码分析的角度看看Vuejs的内部运行机制，我们以Vue-2.5.16版本源码为例

Vue项目的目录结构

每个文件目录的作用我们不用详细解读，大体能猜测其中含义，比如：

examples 存放一些应用示例
flow 类型声明，使用的开源项目
packages 存放独立发布包的目录
scripts 项目构建相关的配置脚本
src 存放整个项目的核心文件

......

Vue项目package.json

看了package.json，我们大体能了解到如下信息，整个项目的构建工具是Rollup（Rollup相对于Webpack更轻量级，配置更简单），单元测试使用了Karma框架等等，工程化方面，对整个项目做了如下总结：

ES6+ （Vue整个项目使用的ES6+）
Typescript
Node & NPM
Rollup（构建工具）
Flow（类型检查）
Karma（单元测试框架）

所以要看懂Vue源码首先要了解ES6，要对Node，Npm熟悉，对构建工具rollup有所了解才能看懂整个项目对打包入口。

Vue的构建输出

通过package.json文件，我们可以看出，整个Vue项目构建输出三种规范：

UMD
Commonjs
ES Module

三种规范的区别，大家可以自行百度补脑，看看npm scripts文件：

 "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev"
 "dev:cjs": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-cjs"
 "dev:esm": "rollup -w -c scripts/config.js --environment TARGET:web-runtime-esm"
 "build": "node scripts/build.js"复制代码

整个项目通过rollup构建，执行

npm run build复制代码

会在dist文件夹中输入我们想要的各种规范类型的文件，执行npm run build，其实是在Node环境下运行了build.js，看看build.js的主要代码

代码中看出，build.js引入了相同目录下的config.js，并拿到配置文件中的builds，后续走构建流程，这快可以看看rollup使用文档，接下来看看config.js，可看到rollup在构建时的文件入口，文件输出，打包规范。重点看下Vue在production下的打包配置

'web-runtime-prod': {
    entry: resolve('web/entry-runtime.js'),
    dest: resolve('dist/vue.runtime.min.js'),
    format: 'umd',
    env: 'production',
    banner
}复制代码

'web-full-prod': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.min.js'),
    format: 'umd',
    env: 'production',
    alias: { he: './entity-decoder' },
    banner
}复制代码

entry 文件打包入口
dest 文件输入目标目录
format 打包规范
env NODE_ENV的值

所以，Vue项目提供给生产环境使用的包，使用的是umd规范，即浏览器和服务器端都兼容，入口文件是wen目录下的entry-runtime.js和entry-runtime-with-compiler.js，这两个之间有啥区别？

Vue的不同构建输出

Vue在构建输出时提供了两个版本runtime和full，顾名思义就是运行时版本和完整版

运行时版本入口：entry-runtime.js
完整版入口：entry-runtime-with-compiler.js

通过两个版本的入口文件，其实我们能看出区别，完整版比运行时版本多了一个compiler，compiler的作用后续源码分析中会讲到，就是把template编译成render function。但是在我们现实项目中不会用到这个，所以我们选择包体积更小的运行时版本即可。

Vue项目入口

通过上面的解说，可以看出，Vue项目的编译入口是在web目录下，web其实是个alias，我们看看项目aslise的定义

web对应的是src/platforms/web，我们找到这个目录

整个项目的入口已经找到，为我们的源码分析奠定了坚实的基础，后续我们做源码分析，就从这个两个文件入手

Vue源码解析

敬请期待......