目錄結構

客官別急，先來看看源碼的整體目錄~以下是目前我自己看過vue源碼的部分目錄（不完整）

• build

  • alias 定義別名
  • config 定義各種構建方式
  • build

• dist

  • vue.js 構建后生成的文件，npm run dev后生成vue.js用于調(diào)試

• flow

  • flow是Facebook出品的，針對JavaScript的靜態(tài)類型檢查工具,為Javascript增加強類型系統(tǒng)的支持

• src

  • compiler 編譯器 將模板字符串轉化為AST，由AST再轉化為本地代碼，其中對代碼進行優(yōu)化
  • core
    • components
    • global-api
    • instance 實例初始化
    • observer 數(shù)據(jù)觀察，響應式，雙向綁定
    • util 工具類
    • vdom 虛擬dom
  • platforms 各種使用vue的平臺
  • server 服務端使用

• test

  • unit 單元測試

找個切入點開始學習vue

學習vue源碼，把源碼下下來之后第一件事當然是把項目跑起來啦，看看什么回事

npm install
npm run dev 

我在運行第二條語句的時候出現(xiàn)了錯誤

Error: Could not load C:\vue\src\core/config (imported by C:\vue\src\platforms\web\entry-runtime-with-compiler.js): ENOENT: no such file
or directory, open 'C:\vue\src\core\config'

然后發(fā)現(xiàn)是rollup-plugin-alias插件中路徑'/' 應該改為''，估計是有人提PR出現(xiàn)bug了，解決方法是將node_modules/rollup-plugin-alias/dist/rollup-plugin-alias.js 第81行：
var entry = options[toReplace]; 改為 var entry = normalizeId(options[toReplace]); 就沒問題啦~

run成功后會在dist文件夾中生成vue.js文件，有了這個文件，我們就可以通過引入它來寫一下demo，邊寫栗子邊打斷點邊看源碼，這樣會更加便于我們對源碼的了解哦~

然后我們看一下package.json文件script里面dev指令究竟做了什么：

rollup -w -c build/config.js --environment TARGET:web-full-dev

這時候又有疑惑了，rollup又是啥，然后又谷歌了一番，得知這玩意兒大概也是一個前端模塊的打包利器，通過tree-shaking的方式讓你的bundle最小化（這是多虧es6中解構賦值的語法才形成的好方法），它還提供了sourcemap功能（其實我感覺和webpack差不多，就webpack實現(xiàn)了代碼拆分按需加載，而rollup生成更簡潔的代碼一次性執(zhí)行）

再看回上文的指令，-w 指的是watch，-c build/config.js 指定配置文件是build/config.js，--environment TARGET:web-full-dev指的是process.env.TARGET的值等于 web-full-dev，emmm..接下來我們進到build/config.js看看里面是啥

我找到了web-full-dev的對應代碼

// Runtime+compiler development build (Browser)
  'web-full-dev': {
    entry: resolve('web/entry-runtime-with-compiler.js'),
    dest: resolve('dist/vue.js'),
    format: 'umd',
    env: 'development',
    alias: { he: './entity-decoder' },
    banner
  },

所以跟著代碼走到了genConfig函數(shù)，得知這個文件的輸出結果是

module.exports = genConfig({
    entry: path.resolve(__dirname, '../src/platforms/web/web-runtime-with-compiler.js'),
    dest: path.resolve(__dirname, '../dist/vue.js'),
    format: 'umd',
    env: 'development',
    alias: { he: './entity-decoder' },
    banner
})

所以入口文件就是../src/platforms/web/web-runtime-with-compiler.js，現(xiàn)在我們就可以一步一步尋找vue的足跡啦。

從入口文件開始尋找它是從哪里import出vue的，然后一步一步的找

import Vue from './runtime/index'

到

import Vue from 'core/index'

再到

import Vue from './instance/index'

終于...找到了core/instance/index文件，有種找到家的感覺有木有！instance文件夾從名字可以猜出應該是與vue實例初始化相關的文件，下一篇我們就從這里開始我們的vue之旅咯~！