vue 源碼：如何調試源碼

前言

本打算開始深刻源碼，跟原來閱讀源碼的方式同樣。

可是總以爲這樣有哪裏不對勁，是的，一味的看着源碼也只能猜想代碼的思路，並不能證實這思路就是正確的。

因而我打算換一種方式閱讀源碼，因而想到了打斷點調試。

然而在嘗試調試 vue 的源碼期間，我遇到了很多問題，因此乾脆就總結成這篇文章，給你們分享分享。

安裝環境

先是 clone 整個項目，我選擇的是 vue@2.0.1。

進入目錄，執行命令 npm install 安裝 node_modules。

打開文件 build/config.js，找到 genConfig 函數，添加上 sourceMap。

而後執行命令 npm run dev 後便可調試。

在 Mac 上已經能夠開始調試了，可是 Windows 上會遇到一些問題。

Windows

Windows 下我遇到了三個問題，接下來會一一列出。

1. 命令兼容

執行完 npm run dev 會報錯 'TARGET' 不是命令。

查看一下該條命令：

"dev": "TARGET=web-standalone-dev rollup -w -c build/config.js"
複製代碼

這一條命令 Windows 是不識別的，須要修改成（&& 符號左右不能有空格）：

"dev": "set TARGET=web-standalone-dev&&rollup -w -c build/config.js"
複製代碼

另外一種解決方法就是安裝 cross-env 包：

npm install --save-dev cross-env
複製代碼

在 package.json 中修改成：

"dev": "cross-env TARGET=web-standalone-dev rollup -w -c build/config.js"
複製代碼

至此，'TARGET' 不是命令的問題就解決了。

2. rollup-plugin-alias

繼續執行命令，會發現路徑報錯：

D:\源碼\vue-2.0.1\src\core/index
複製代碼

這是由於 rollup-plugin-alias@1.2.0 這個插件不支持 Windows 目錄，將其更新到 1.4.0 便可。

npm install rollup-plugin-alias@1.4.0 --save-dev
複製代碼

3. 中文目錄

本覺得能夠運行成功，沒想到仍是報錯：

咱們能夠看到路徑已經沒問題了，那是什麼問題呢？

抱着嘗試的心態，我把中文目錄改爲英文目錄，發現運行成功了。。。

因此要以此爲教訓，避免使用中文命名目錄。

斷點調試

命令運行起來的，接下來能夠開始愉快地打斷點啦。

隨便打開一個例子 examples/commits/index.html。

End