vue原始碼debug環境搭建
概述
為了探究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
npm install
3.
npm setup
4.npm install rollup-plugin-alias@^1.4.0 -D
(非win10使用者可跳過該步)
5.修改克隆下來的專案中的\build\config.js
檔案中的function genConfig (name) {}
內部的配置物件const config = {xxx}
,在其中加入sourceMap: true
欄位。
6.npm run dev
啟動除錯環境
7.開啟/exapmle/commits/index.html
(在瀏覽器中直接開啟即可),直接F12除錯即可。
備註
第6步起來後,會在/dist
目錄下生成一個vue.js
的檔案,只要引入該檔案即可除錯。第7步中的examples資料夾中的檔案作為示例使用。
結語
至此就可以開心的研究vue原始碼啦。