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

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源码啦。

文章链接

    原文作者:A_大白
    原文地址: https://segmentfault.com/a/1190000018038749
    本文转自网络文章,转载此文章仅为分享知识,如有侵权,请联系博主进行删除。
点赞