前面兩部分介紹了Vuejs的各個(gè)發(fā)布版本，以及它們的區(qū)別。也了解了VueJS源碼的代碼結(jié)構(gòu)，以及基本的構(gòu)建過(guò)程。
下一代ES6 模塊打包工具 rollup 是通過(guò) entry 文件中的模塊引入來(lái)分析依賴關(guān)系并完成代碼打包的，所以下面我們的重點(diǎn)就是這個(gè) entry 文件了。
以 src/entries/web-runtime-with-compiler.js 為例。
打開(kāi)文件，第一行有個(gè)
/* @flow */
這又是什么，沒(méi)見(jiàn)過(guò)，Google之。https://flowtype.org/
原來(lái)這貨時(shí)一個(gè)javascript靜態(tài)類型檢查器，代碼中有個(gè) .flowconfig 文件就是給它用的。好的，這不是我們的重點(diǎn)，略之。
繼續(xù)向下看代碼
下面就是一連串的import語(yǔ)句了，我們先來(lái)看看簡(jiǎn)單的
import { warn, cached } from 'core/util/index'
其實(shí)在 'core/util/index' 文件中并沒(méi)有 warn 和 cached 的直接定義，也是從其他模塊中引入的。具體來(lái)看一下，warn 是在 'core/util/debug' 模塊中定義，而 cached 其實(shí)是在 'shared/util' 模塊中定義的。
細(xì)心的話就會(huì)發(fā)現(xiàn)，在 'core/util/index' 文件中引入 'shared/util' 的時(shí)候，相對(duì)路徑是不正確的，rollup是如何找到它的？這里有必要介紹一下 alias。
我們回顧一下build的過(guò)程，有個(gè) getConfig 函數(shù)中用到了 alias， 并且在build目錄下面有個(gè) alias.js 文件，其實(shí)里面已經(jīng)記錄了這些別名的映射關(guān)系，所以我們?cè)趇mport的時(shí)候就可以直接使用別名來(lái)導(dǎo)入模塊了。
import { query } from 'web/util/index'
是從 'platforms/web/util/index' 中引入了 query 這個(gè)依賴。
import { shouldDecodeNewlines } from 'web/util/compat'
是從 'platforms/util/compat' 中引入shouldDecodeNewlines 這個(gè)依賴。
import { compileToFunctions } from 'web/compiler/index'
則是從 'platforms/compiler/index' 中引入 compileToFunctions 這個(gè)依賴的。
import Vue from './web-runtime'
看名字就知道這個(gè)才是重點(diǎn)。
過(guò)一遍代碼就會(huì)發(fā)現(xiàn)，這個(gè)文件的邏輯也相對(duì)簡(jiǎn)單。
從 './web-runtime' 中引入了Vue構(gòu)造器， 并對(duì)Vue.prototype.$mount進(jìn)行了包裝。
- 首先是判斷給定的el參數(shù)是否是
<html>或<body>。如果是的話，就給出警告并返回當(dāng)前vue的實(shí)例對(duì)象，不做其它處理。- 然后判斷當(dāng)前vue實(shí)例對(duì)象是否配置了 render 屬性。 如果沒(méi)有就去查找或計(jì)算 template 屬性，然后使用 compiler 模塊構(gòu)建 render 和 staticRenderFns 方法, 并將其注入到當(dāng)前vue實(shí)例對(duì)象中。
- 最后調(diào)用原始的Vue.prototype.$mount方法。
另外，從 'build/config.js' 文件中可以知道 'web-runtime' 是構(gòu)建 'vue.runtime.js' 的入口文件。而當(dāng)前的構(gòu)建入口文件，只是重用了 runtime 版本，并包裝了compiler。
打開(kāi) 'vue.runtime.js' 文件，發(fā)現(xiàn)這也是對(duì)原始Vue構(gòu)造器的包裝。這樣逐級(jí)向上查找，我們就會(huì)找到最最原始的Vue構(gòu)造器是如何定義和擴(kuò)展的。
為何要如此關(guān)注Vue構(gòu)造器的定義呢？因?yàn)閭€(gè)人理解在VueJS的開(kāi)發(fā)中，最主要的就是如何去實(shí)例化Vue對(duì)象。
以后就可以具體到代碼中一探究竟了。
