[TOC]
* * * * *
# 1 构建目录名称(build\\,dist\\)
* src\build\目录中包含vue自动构建与测试文件。
* src\dist\目录中包含vue构建后生成的目标文件
# 2 构建目录(build\\)文件分析
* alias.js 主要是核心目录别名定义，用于构建过程
* build.js 主要是构建过程
* ci.sh 自动化脚本入口
* karma.**.js karma自动化测试配置
* nightwatch.config.js nightwatch自动化测试配置
* release.sh 版本发布自动化脚本
* webpack.**.js webpack打包配置文件
> karma用于自动化测试框架karma
> webpack用于webpack打包框架
## 2-1 (alias.js) 模块别名文件分析
~~~
\build\alias.js
var path = require('path')
;核心目录别名
module.exports = {
vue: path.resolve(__dirname, '../src/entries/web-runtime-with-compiler'),
compiler: path.resolve(__dirname, '../src/compiler'),
core: path.resolve(__dirname, '../src/core'),
shared: path.resolve(__dirname, '../src/shared'),
web: path.resolve(__dirname, '../src/platforms/web'),
server: path.resolve(__dirname, '../src/server'),
entries: path.resolve(__dirname, '../src/entries')
}
;compiler,core,entries,web,server,vue等目录别名
~~~
## 2-2 (build.js) 构建过程文件分析
~~~
build\build.js
...
;构建配置信息
var builds = [
// Runtime only (CommonJS). Used by bundlers e.g. Webpack & Browserify
{
entry: 'src/entries/web-runtime.js',
format: 'cjs',
out: 'dist/vue.common.js'
},
// Minified runtime, only for filze size monitoring
{
entry: 'src/entries/web-runtime.js',
format: 'umd',
env: 'production',
out: 'dist/vue.common.min.js'
},
// Runtime+compiler standalone developement build.
{
entry: 'src/entries/web-runtime-with-compiler.js',
format: 'umd',
env: 'development',
out: 'dist/vue.js',
banner: true,
alias: {
entities: './entity-decoder'
}
},
// Runtime+compiler standalone production build.
{
entry: 'src/entries/web-runtime-with-compiler.js',
format: 'umd',
env: 'production',
out: 'dist/vue.min.js',
banner: true,
alias: {
entities: './entity-decoder'
}
},
// Web compiler (CommonJS).
{
entry: 'src/entries/web-compiler.js',
format: 'cjs',
external: ['entities', 'de-indent', 'source-map'],
out: 'packages/vue-template-compiler/index.js'
},
// Web server renderer (CommonJS).
{
entry: 'src/entries/web-server-renderer.js',
format: 'cjs',
external: ['stream'],
out: 'packages/vue-server-renderer/index.js'
}
]
;运行时文件 dist\vue.common.js
;运行时压缩文件 dist\vue.common.min.js
;编译运行文件 dist\vue.js
;编译运行时压缩文件 dist\vue.min.js
;web模板编译文件 packages\vue-teample-compiler\index.js
;web服务端渲染文件 packages\vue-server-renderer\index.js
;根据命令行参数过滤构建配置
if (process.argv[2]) {
var filters = process.argv[2].split(',')
builds = builds.filter(b => {
return filters.some(f => b.out.indexOf(f) > -1)
})
}
;构建过程
build(builds)
;构建实现
function build (builds) {
var built = 0
var total = builds.length
next()
function next () {
buildEntry(builds[built]).then(function () {
built++
if (built < total) {
next()
}
}).catch(logError)
}
}
...
~~~
# 3 构建生成目录(dist\\)分析
* vue.common.js 构建后生成的运行时文件
* vue.js 构建后生成的编译运行时文件
* vue.min.js 构建后生成的编译运行时压缩文件
> 构建文件主要根据核心目录的构建入口目录(src\entries\)对应文件生成。
> 根据上面的build\build.js可知
> vue.common.js 由src\entries\web-runtime.js文件构建
> vue.js 由src\entries\web-runtime-with-compiler.js文件构建
> vue.min.js 在vue.js基础上混淆压缩得到。
> 下面分析构建文件对应的核心目录src的组成部分与顺序组织。
## 3-1 (vue.js) 编译运行时文件结构分析
~~~
;dist\vue.js
; 1 全局注册Vue
; 2 src\shared\util.js 全局工具文件
; 3 src\core\config.js 核心配置文件
; 4 src\core\util\lang.js 核心工具语言扩展文件
; 5 src\core\util\env.js 核心工具环境检测文件
; 6 src\core\instance\proxy.js 核心proxy接口
; 7 src\core\observer\dep.js 数据绑定消息订阅器管理文件
; 8 src\core\observer\scheduler.js 刷新队列管理文件
; 9 src\core\observer\watcher.js 消息订阅者文件
; 10 src\core\observer\array.js 数组监控文件
; 11 src\core\observer\index.js 数据绑定入口文件
; 12 src\core\instance\state.js 核心状态接口文件
; 13 src\core\vdom\vnode.js 虚拟dom实例化文件
; 14 src\core\vdom\helper.js 虚拟dom助手文件
; 15 src\core\instance\lifecycle.js 核心生命周期接口文件
; 16 src\core\vdom\create-component.js 虚拟dom生成组件文件
; 17 src\core\vdom\create-element.js 虚拟dom生成元素文件
; 18 src\core\instance\render.js 核心渲染接口
; 19 src\core\instance\events.js 核心事件接口
; 20 src\core\instance\index.js 核心接口入口文件
; 21 src\core\util\debug.js 核心调试工具
; 22 src\core\util\options.js 核心options工具
; 23 src\core\util\props.js 核心prop工具
; 24 src\core\util\index.js 工具接口文件
; 25 src\core\global-api\use.js 扩展插件注册
; 26 src\core\global-api\mixin.js 扩展选项合并
; 27 src\core\global-api\extend.js 扩展继承父类
; 28 src\core\global-api\assets.js 扩展资源注册
; 29 src\core\components\keep-alive.js 框架内置组件keep-alive
; 30 src\core\components\index.js 框架内置组件
; 31 src\core\global-api\index.js 扩展接口入口
; 32 src\core\index.js 核心入口文件
; 33 src\platforms\web\util\attr.js web平台attr工具
; 34 src\platforms\web\util\class.js web平台class工具
; 35 src\platforms\web\util\element.js web平台element工具
; 36 src\platforms\web\util\index.js web平台工具入口
; 37 src\platforms\web\runtime\node-ops.js web平台节点操作
; 38 src\core\vdom\patch.js 虚拟dom比较刷新接口
; 39 src\core\vdom\modules\directives.js 虚拟dom指令操作
; 40 src\core\vdom\modules\ref.js 虚拟dom的引用注册
; 41 src\platforms\web\runtime\modules\attr.js web平台attr操作
; 42 src\platforms\web\runtime\modules\class.js web平台class操作
; 43 src\platforms\web\runtime\modules\events.js web平台events操作
; 44 src\platforms\web\runtime\modules\props.js web平台props操作
; 45 src\platforms\web\runtime\modules\style.js web平台style操作
; 46 src\platforms\web\runtime\class-util.js web平台svg-class操作
; 47 src\platforms\web\runtime\modules\tarnsition.js web平台动画transition操作
; 48 src\platforms\web\runtime\patch.js web平台比较刷新接口
; 49 src\platforms\web\runtime\directives\model.js web平台model指令
; 50 src\platforms\web\runtime\directives\show.js web平台show指令
; 51 src\platforms\web\runtime\components\transition-control.js web平台动画组件
; 52 src\entries\web-runtime.js web平台运行入口文件
; 53 src\compiler\parser\entity-decoder.js 模板解析实体生成
; 54 src\compiler\parser\html-parser.js 模板html解析
; 55 src\compiler\parser\filter-parser.js 模板filter解析
; 56 src\compiler\parser\text-parser.js 模板text解析
; 57 src\compiler\helpers.js 模板编译助手
; 58 src\compiler\parser\index.js 模板解析入口
; 59 src\compiler\optimizer.js 模板解析优化
; 60 src\compiler\events.js 模板events解析
; 61 src\compiler\directives\ref.js 模板解析ref解析
; 62 src\compiler\directives\bind.js 模板解析bind解析
; 63 src\compiler\codegen.js 模板解析渲染生成
; 64 src\compiler\index.js 模板编译入口
; 65 src\compiler\error-detector.js 模板解析错误检测
; 66 src\platforms\web\compiler\modules\class.js web平台模块class编译
; 67 src\platforms\web\compiler\modules\style.js web平台模块style编译
; 68 src\platforms\web\compiler\modules\transition.js web平台模块transition编译
; 69 src\platforms\web\compiler\directives\model.js web平台指令model编译
; 70 src\platforms\web\compiler\directives\text.js web平台指令text编译
; 71 src\platforms\web\compiler\directives\html.js web平台指令html编译
; 72 src\platforms\web\compiler\index.js web平台编译入口
; 73 src\entries\web-runtime-with-compiler.js web编译运行时入口
; 依赖关系组织
~~~
## 3-2 (vue.common.js) 运行时文件分析
~~~
~~~
- 框架概述
- 框架目录
- 类型检查
- 测试示例
- 构建目录
- 核心依赖
- 框架结构
- 模板编译(compiler)
- directives(指令解析)
- parser(模板解析)
- codegen.js(生成渲染函数)
- error-detector.js(错误检测)
- events.js(事件解析)
- helpers.js(编译助手)
- index.js(编译入口)
- optimizer.js(解析优化)
- 核心接口(core)
- components(框架组件)
- global-api(框架扩展)
- instance(Vue核心)
- observer(数据绑定)
- util(核心工具)
- vdom(虚拟dom)
- config.js(配置文件)
- index.js(入口文件)
- 构建入口(entries)
- web-compiler.js(编译时)
- web-runtime.js(运行时)
- web-runtime-with-compiler.js(编译运行时)
- web-server-renderer.js(服务端渲染)
- 平台接口(platforms\web)
- compiler(web编译时)
- runtime(web运行时)
- server(web服务渲染)
- util(web工具)
- 服务端渲染(server)
- create-renderer.js(渲染接口)
- render.js(函数渲染)
- render-stream.js(流渲染)
- 工具目录(shared)
- util(工具文件)
- 框架流程
- Vue初始化
- Vue模板编译
- Vue数据渲染
- Vue数据绑定
- 框架更新
- 更新日志
- 基础原理
- js基础
- 数据绑定基础
- vdom基础
- mvvm基础
- 框架总结