vue源碼調試踩坑記錄

目的: 可以斷點調試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 就可以調試了.