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

952 阅读3分钟
作为前端框架三剑客之一的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项目构建输出三种规范:

  1. UMD
  2. Commonjs
  3. 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源码解析

敬请期待......