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

nihao 發布于2019-08-26 13:29 / 1394人閱讀

摘要：目標是為了可以調試版本的，也就是下的源碼，所以主要是的開啟。結語至此就可以開心的研究源碼啦。文章鏈接源碼分析系列源碼分析系列之入口文件分析源碼分析系列之響應式數據一源碼分析系列之響應式數據二

概述

為了探究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源碼啦。

文章鏈接

vue源碼分析系列

vue源碼分析系列之入口文件分析

vue源碼分析系列之響應式數據（一）

vue源碼分析系列之響應式數據（二）

GPU云服務器云服務器 vue源碼 vue webrtc 源碼超融合方案分析系列數據分析與數據分析系列教材

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/108915.html

vue源碼分析系列之響應式數據（一）

摘要：代碼初始化部分一個的時候做了什么當我們一個時，實際上執行了的構造函數，這個構造函數內部掛載了很多方法，可以在我的上一篇文章中看到。合并構造函數上掛載的與當前傳入的非生產環境，包裝實例本身，在后期渲染時候，做一些校驗提示輸出。概述在使用vue的時候，data,computed,watch是一些經常用到的概念，那么他們是怎么實現的呢，讓我們從一個小demo開始分析一下它的流程。 dem...

liujs 2019-08-23 15:11 評論0 收藏0
vue源碼分析系列

摘要：本系列文章旨在化繁為簡，通讀源碼，描述背后的實現邏輯。記錄方式主要是代碼注釋文章鏈接源碼分析系列之環境搭建源碼分析系列之入口文件分析源碼分析系列之響應式數據一源碼分析系列之響應式數據二概述在使用vue的時候，會遇到很多神奇的地方，比如修改vue實例中data對象的屬性值，會觸發dom值的改變；改變dom中的輸入，會觸發data對應屬性的改變，即雙向數據綁定。通過watch可以...

Joonas 2019-08-23 15:10 評論0 收藏0
vue源碼分析系列之響應式數據（四）

摘要：執行當時傳入的回調，并將新值與舊值一并傳入。文章鏈接源碼分析系列源碼分析系列之環境搭建源碼分析系列之入口文件分析源碼分析系列之響應式數據一源碼分析系列之響應式數據二源碼分析系列之響應式數據三前言上一節著重講述了initComputed中的代碼，以及數據是如何從computed中到視圖層的，以及data修改后如何作用于computed。這一節主要記錄initWatcher中的內容。 ...

GHOST_349178 2019-08-23 15:16 評論0 收藏0
vue源碼分析系列之入口文件分析

摘要：中引入了中的中引入了中的中，定義了的構造函數中的原型上掛載了方法，用來做初始化原型上掛載的屬性描述符，返回原型上掛載的屬性描述符返回原型上掛載與方法，用來為對象新增刪除響應式屬性原型上掛載方法原型上掛載事件相關的方法。入口尋找入口platforms/web/entry-runtime-with-compiler中import了./runtime/index導出的vue。 ./r...

kgbook 2019-08-23 15:10 評論0 收藏0
教你如何在 IDEA 遠程 Debug ElasticSearch

摘要：前提之前在源碼閱讀環境搭建文章中寫過我遇到的一個問題遲遲沒有解決，也一直困擾著我。然后后面自己分享文章在掘金也發現有人和我有同樣的問題。下面講講另一種可以讓你繼續看源碼的方法。配置新建一個遠程的配置如下圖接下來點擊就好了。前提之前在源碼閱讀環境搭建文章中寫過我遇到的一個問題遲遲沒有解決，也一直困擾著我。問題如下，在啟動的時候解決掉其他異常和報錯后，最后剩下這個錯誤一直解決不了： [...

Cheng_Gang 2019-08-19 11:04 評論0 收藏0