作为前端框架三剑客之一的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源码解析
敬请期待......