目的: 可以斷點除錯vue的原始碼, 研究一個new vue({...})以及data的更新在vue原始碼內部是如何執行的

目前做到了, 其實比較簡單, 也不知道為什麼會弄了一天…

遇到的問題有2個, 其中一個是坑

一:

其實git clone repo -> npm install -> npm run setup -> npm run dev 就可以了,

但是問題發生在 rollup-plugin-alias 這個外掛

vue目前@2.5.9的-dev用的rollup-plugin-alias是^1.3.1

裡面關於別名有一個bug是win10下生成的alias在最後一個路徑的/會變成\

類似 ../src/dev/config\index.js

解決這個問題方法有2個

(1)升級rollup-plugin-alias至^1.4.0
(2)在node_module裡面改rollup-plugin-alias的原始碼(只需要改一行)

二:

找到網上大多數解決方案都是除錯打包後的原始碼(1萬行那種umd)

在F12後要看見vue專案src/core裡面那些instance資料夾的程式碼, 好像沒有找到

於是瞭解了一天vue採用的打包工具rollup

最後解決了

正文:

以下是 “手把手截圖記錄步驟”

(1) 執行 git clone https://github.com/vuejs/vue.git

(2) 執行 npm install & npm run setup

(3) 如果你電腦不是win10就跳過這一步

執行npm run dev會報錯如圖:

解決方法,找到
\node_modules\rollup-plugin-alias\dist\rollup-plugin-alias.js

這個檔案, 如下修改

return {
    resolveId: function (importee, importer) {
      var importeeId = normalizeId(importee);
      var importerId = normalizeId(importer);

      // First match is supposed to be the correct one
 

      var toReplace = aliasKeys.find(function (key) {
        return matches(key, importeeId);
      });

      if (!toReplace) {
        return null;
      }
      // 以下是需要修改的地方
      // var entry = options[toReplace]; 把這一行改成下面這樣
      var entry = normalizeId(options[toReplace]);

(4) 找到 \build\config.js 檔案

把 genConfig 函式的 config 變數加一個屬性 sourceMap: true 如圖:

(5) 執行 npm run dev

(6) 開啟 \examples\commits\index.html,開始斷點除錯, 如圖:

在執行 npm run dev 下, 每一次修改\src\core的檔案, 都會在\dist目錄下生成新的vue.js , 這樣直接引入\dist\vue.js 就可以除錯了.