vue源碼解析（一）
先決條件
- 需要能夠熟悉使用 vue 礁遣，了解vue屬性和方法懦窘。
- 帶著問(wèn)題去看源碼
- 熟悉ES6或者Typescript語(yǔ)法
- 確定源碼的版本短纵，我看的是 2.6.12
從哪文件開(kāi)始看vue源碼杈帐？
現(xiàn)在前端開(kāi)發(fā)，都是用 npm 管理我們開(kāi)發(fā)中經(jīng)常使用各種依賴包悟泵，vue也不例外杈笔，所以，我們下載源碼后糕非，先找到 package.json 文件蒙具，知道編譯腳本的文件代碼和執(zhí)行vue的入口文件代碼是哪個(gè)。
如上圖朽肥，我們找到了執(zhí)行vue入口文件（dist/vue.runtime.common.js）和build 腳本執(zhí)行文件(scripts/build/js)禁筏。
先看 build 腳本執(zhí)行文件代碼
在
scripts/build.js文件中，可以看到執(zhí)行了 build()方法衡招，這個(gè)方法主要作用就是循環(huán)使用 rollup 插件來(lái)編譯打包我們模塊代碼篱昔，rollup 和 webpack 類似，不過(guò)主要打包 js 文件始腾，開(kāi)發(fā)純js插件州刽，建議使用rollup，開(kāi)發(fā)組件的話建議使用webpack浪箭。
言歸正傳穗椅，上面說(shuō)循環(huán)打包，這個(gè)循環(huán)的數(shù)據(jù)來(lái)源于build()方法的參數(shù)奶栖，let builds = require('./config').getAllBuilds()匹表。
根據(jù)以上代碼找到同級(jí)目錄下的 config.js 文件，代碼如下。
主要代碼
exports.getAllBuilds = () => Object.keys(builds).map(genConfig)，這個(gè)代碼的作用就是根據(jù) builds 數(shù)據(jù)评疗，組織要打包的配置項(xiàng)數(shù)組, 返回給 rollup 進(jìn)行打包。
builds數(shù)據(jù)
重點(diǎn)在最后一個(gè)配置項(xiàng) web-runtime-prod
文章一開(kāi)始流椒，我們找到了 vue 的入口文件 dist/vue.runtime.min.js，再通過(guò)找到這個(gè)配置項(xiàng)明也，我們就知道了編譯入口文件的源碼文件就是 entry-runtime.js ，距離我們 從哪兒看源碼的問(wèn)題 只有一步距離惯裕，只要找到 entry-runtime.js 就行温数。
我們?cè)俜治鲆幌?resolve 方法
這個(gè)方法，主要作用就是拼接路徑蜻势。
具體方法是：通過(guò)正則表達(dá)式撑刺，把傳入的地址參數(shù)截取兩段，比如：web/entry-runtime.js 截取后就是 base = ['web', 'entry-runtime.js']握玛。
再通過(guò)別名文件 require('./alias') 找到 web對(duì)應(yīng)的真實(shí)路徑够傍。
最后的源碼文件地址就是 src/platforms/web/entry-runtime.js
總結(jié)
以上說(shuō)了那么多甫菠，主要就是先確定vue的編譯后的文件，再根據(jù)執(zhí)行腳本文件冕屯，順藤摸瓜找到vue的源碼寂诱。
