[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基礎
- 框架總結