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
就可以除錯了.