概述
为了探讨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.修正克隆下来的项目中的\build\config.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源码啦。