近期VueJS非常的火拴清，于是就想學(xué)學(xué)它是如何開(kāi)發(fā)的泻蚊。
以往學(xué)習(xí)一個(gè)新的框架躲舌，都是從官方的文檔和一些大神的博文開(kāi)始的。這次想換個(gè)思路性雄，從源碼開(kāi)始没卸。
接觸前端技術(shù)也有幾年了，用過(guò)了不少的框架和工具庫(kù)秒旋。一直都是知其然而不知其所以然约计，也想借助框架源碼的學(xué)習(xí)，來(lái)鞏固一下基礎(chǔ)知識(shí)迁筛。前端技術(shù)發(fā)展迅猛煤蚌，習(xí)之如同逆水行舟，不進(jìn)則退啊细卧。嗚呼尉桩，哀哉。贪庙。蜘犁。
當(dāng)然，開(kāi)始之前也到官網(wǎng)簡(jiǎn)單的了解了一下基本原理和API止邮。
OK! Let's go!
首先必然是從github上clone一份vuejs的源碼到本地
git clone -b master https://github.com/vuejs/vue.git
我們先來(lái)看看dist目錄下面都有哪些東西这橙。
$ ls dist/
README.md vue.common.js vue.js vue.min.js vue.runtime.common.js vue.runtime.js vue.runtime.min.js
可以看到6個(gè)js文件和一個(gè)readme，那這些文件有哪些區(qū)別农尖，可以到readme中看看析恋。
- 第一行給出了一個(gè)規(guī)則解釋：以 common.js 結(jié)尾的文件是為構(gòu)建工具準(zhǔn)備的，不以 common.js 結(jié)尾的文件是為瀏覽器直接運(yùn)行而準(zhǔn)備的盛卡。
- vue.js和vue.min.js助隧，支持在瀏覽器中直接用script標(biāo)簽引入。其中vue.js硬編碼為開(kāi)發(fā)模式，vue.min.js硬編碼為生產(chǎn)模式并村。
- vue.common.js基于CommonJS標(biāo)準(zhǔn)構(gòu)建巍实，同時(shí)包含compiler。它是為打包工具（Webpack或Browserify）準(zhǔn)備的哩牍。有別于瀏覽器構(gòu)建版本棚潦，用來(lái)判斷 開(kāi)發(fā)/生產(chǎn) 模式的 process.env.NODE_ENV ，可以在構(gòu)建過(guò)程中指定（非硬編碼）膝昆。當(dāng)運(yùn)行于node環(huán)境時(shí)丸边，vuejs會(huì)讀取node環(huán)境的 process.env.NODE_ENV
- vue.runtime.common.js，也是基于CommonJS標(biāo)準(zhǔn)構(gòu)建荚孵，但是不包含compiler妹窖，這意味著你不能能使用 template 選項(xiàng)。但是仍然可以在 .vue 但文件組建中使用收叶，因?yàn)槿?vue-loader vueify 等會(huì)默認(rèn)預(yù)編譯模板骄呼。
- vue.runtime.js，瀏覽器構(gòu)建版本判没，不包含compiler蜓萄。硬編碼為開(kāi)發(fā)模式。
- vue.runtime.min.js澄峰，同vue.runtime.js嫉沽。硬編碼為生產(chǎn)模式。
接下來(lái)我們看看package.json還給我們提供了哪些信息摊阀。
打開(kāi)package.json耻蛇，其中有一行
"main": "dist/vue.runtime.common.js"
這意味著在使用模塊化系統(tǒng)中通過(guò)一些代碼引用模塊時(shí)，默認(rèn)引入的是 vue.runtime.common.js 文件胞此。（既不能在代碼中直接使用 template 選項(xiàng)）
import Vue from 'vue';
or
var Vue = require('vue');
如果需要使用 template 該怎么做臣咖？
Webpack中可以用resolve.alias將vue模塊指向其他的構(gòu)建版本
resolve: { alias: { vue$: 'vue/dist/vue.common.js' } }Browserify中 aliasify 同樣可以實(shí)現(xiàn)
OK，了解了這些之后漱牵，我們應(yīng)該來(lái)看看具體的代碼了夺蛇。
打開(kāi)dist/vue.js，發(fā)現(xiàn)文件不小酣胀，同時(shí)也不容易找到重點(diǎn)刁赦。不如我們直接打開(kāi)src目錄，看看代碼結(jié)構(gòu)闻镶。一目了然甚脉，結(jié)構(gòu)很清晰。但是entries文件夾下的內(nèi)容是做什么的铆农，第一時(shí)間沒(méi)有猜到牺氨，看來(lái)有必要結(jié)合以下build過(guò)程來(lái)了解一下。
下面來(lái)看看項(xiàng)目是如何build的吧。
