vue源码调试踩坑记录

目的: 可以断点调试vue的源代码, 研究一个new vue({...})以及data的更新在vue源码内部是如何运行的

目前做到了, 其实比较简单, 也不知道为什么会弄了一天…

如何你想直接看解决方案, 请戳这一行

遇到的问题有2个, 其中一个是坑

一:

其实git clone repo -> npm install -> npm run setup -> npm run dev 就可以了,

但是问题发生在 rollup-plugin-alias 这个插件

vue目前@2.5.9的-dev用的rollup-plugin-alias是^1.3.1

里面关于别名有一个bug是win10下生成的alias在最后一个路径的/会变成\

类似 ../src/dev/config\index.js

解决这个问题方法有2个

(1)升级rollup-plugin-alias至^1.4.0
(2)在node_module里面改rollup-plugin-alias的源码(只需要改一行)

二:

找到网上大多数解决方案都是调试打包后的源代码(1万行那种umd)

在F12后要看见vue项目src/core里面那些instance文件夹的代码, 好像没有找到

于是了解了一天vue采用的打包工具rollup

最后解决了

正文:

以下是 “手把手截图记录步骤”

(1) 运行 git clone https://github.com/vuejs/vue.git

(2) 运行 npm install & npm run setup

(3) 如果你电脑不是win10就跳过这一步

运行npm run dev会报错如图:

解决方法,找到
\node_modules\rollup-plugin-alias\dist\rollup-plugin-alias.js

这个文件, 如下修改

return {
    resolveId: function (importee, importer) {
      var importeeId = normalizeId(importee);
      var importerId = normalizeId(importer);

      // First match is supposed to be the correct one
      var toReplace = aliasKeys.find(function (key) {
        return matches(key, importeeId);
      });

      if (!toReplace) {
        return null;
      }
      // 以下是需要修改的地方
      // var entry = options[toReplace]; 把这一行改成下面这样
      var entry = normalizeId(options[toReplace]);

(4) 找到 \build\config.js 文件

把 genConfig 函数的 config 变量加一个属性 sourceMap: true 如图:

(5) 运行 npm run dev

(6) 打开 \examples\commits\index.html,开始断点调试, 如图:

在运行 npm run dev 下, 每一次修改\src\core的文件, 都会在\dist目录下生成新的vue.js , 这样直接引入\dist\vue.js 就可以调试了.