vue原始碼分析系列之入debug環境搭建

A_大白發表於2019-01-28

概述

為了探究vue的本質,所以想debug一下原始碼,但是怎麼開始是個問題,於是有了這樣一篇記錄。
目標是為了可以除錯es6版本的,也就是src下的原始碼,所以主要是sourceMap的開啟。
原文來自:https://blog.csdn.net/ReusLi/…。因為不喜歡其排版,所以簡單整理一下。

流程

1.clone vue專案本身
這裡是vue專案的克隆地址https://github.com/vuejs/vue.git,執行常規的git clone命令就好。

git clone https://github.com/vuejs/vue.git

2.npm install
3.npm run setup
4.npm install rollup-plugin-alias@^1.4.0 -D (非win10使用者可跳過該步)
5.修改克隆下來的專案中的uildconfig.js檔案中的function genConfig (name) {}內部的配置物件const config = {xxx},在其中加入sourceMap: true欄位。
6.npm run dev啟動除錯環境
7.開啟/exapmle/commits/index.html檔案,修改其中script[src]對vue的引用,修改其檔名為:vue.min.js->vue.js,然後在瀏覽器中直接開啟該html即可。
8.開發者工具中除錯跟進,探尋原理。

備註

第6步起來後,會在/dist目錄下生成一個vue.js的檔案,只要引入該檔案即可除錯。第7步中的examples資料夾中的檔案作為示例使用。


補充:
2019-2-3:
再次在瀏覽器中開啟html檔案,其中的js沒有關聯到對應的sourceMap。後來嘗試了下,使用了個簡單的http-server的包,在vue的專案根目錄,開啟了一個簡單的本地web的服務。然後通過該服務訪問/example/commits/index.html時,成功的關聯到了對應的sourceMap。

結語

至此就可以開心的研究vue原始碼啦。

文章連結

相關文章