vue 源码：如何调试源码

前言

本打算开始深入源码，跟原来阅读源码的方式一样。

但是总觉得这样有哪里不对劲，是的，一味的看着源码也只能猜测代码的思路，并不能证明这思路就是正确的。

于是我打算换一种方式阅读源码，于是想到了打断点调试。

然而在尝试调试 vue 的源码期间，我遇到了不少问题，所以干脆就总结成这篇文章，给大家分享分享。

安装环境

先是 clone 整个项目，我选择的是 [email protected]。

进入目录，执行命令 npm install 安装 node_modules。

打开文件 build/config.js，找到 genConfig 函数，添加上 sourceMap。

然后执行命令 npm run dev 后即可调试。

在 Mac 上已经可以开始调试了，但是 Windows 上会遇到一些问题。

Windows

Windows 下我遇到了三个问题，接下来会一一列出。

1. 命令兼容

执行完 npm run dev 会报错 'TARGET' 不是命令。

查看一下该条命令：

"dev": "TARGET=web-standalone-dev rollup -w -c build/config.js"
复制代码

这一条命令 Windows 是不识别的，需要修改为（&& 符号左右不能有空格）：

"dev": "set TARGET=web-standalone-dev&&rollup -w -c build/config.js"
复制代码

另一种解决方法就是安装 cross-env 包：

npm install --save-dev cross-env
复制代码

在 package.json 中修改为：

"dev": "cross-env TARGET=web-standalone-dev rollup -w -c build/config.js"
复制代码

至此，'TARGET' 不是命令的问题就解决了。

2. rollup-plugin-alias

继续执行命令，会发现路径报错：

D:\源码\vue-2.0.1\src\core/index
复制代码

这是因为 [email protected] 这个插件不支持 Windows 目录，将其更新到 1.4.0 即可。

npm install rollup-plugin-alias@1.4.0 --save-dev
复制代码

3. 中文目录

本以为可以运行成功，没想到还是报错：

我们可以看到路径已经没问题了，那是什么问题呢？

抱着尝试的心态，我把中文目录改成英文目录，发现运行成功了。。。

所以要以此为教训，避免使用中文命名目录。

断点调试

命令运行起来的，接下来可以开始愉快地打断点啦。

随便打开一个例子 examples/commits/index.html。

End