vue 源码：如何调试源码

前言

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

可是总以为这样有哪里不对劲，是的，一味的看着源码也只能猜想代码的思路，并不能证实这思路就是正确的。

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

然而在尝试调试 vue 的源码期间，我遇到了很多问题，因此干脆就总结成这篇文章，给你们分享分享。

安装环境

先是 clone 整个项目，我选择的是 vue@2.0.1。

进入目录，执行命令 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
复制代码

这是由于 rollup-plugin-alias@1.2.0 这个插件不支持 Windows 目录，将其更新到 1.4.0 便可。

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

3. 中文目录

本觉得能够运行成功，没想到仍是报错：

咱们能够看到路径已经没问题了，那是什么问题呢？

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

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

断点调试

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

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

End