vue源码分析系列:用sourcemap调试源码

由于前几篇文章是用vue-cli直接分析的，今天我们学习直接调试vue源码。

安装vue（mac机)

1.在GitHub上克隆官方的vue-地址
2.安装依赖npm install

修改vue项目

1.在package.json script dev 增加--sourcemap指令

"dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev --sourcemap",

2.运行打包命令npm run dev,可能大多数之前用过vue-cli的人都会以为这里已经运行了一个本地服务，但其实这个项目中没有内置的服务。
这时候会在dist目录下生成vue.js和vue.js.map文件，这两个文件正是我们调试时所需要的。
3.编辑器打开examples/commits/index.html,将<script src="../../dist/vue.mini.js"></script>修改成<script src="../../dist/vue.js"></script>

创建本地服务

由于--sourcemap指令是要依赖服务才能加载到浏览器的如果我们直接打开，它是不生效的。
不生效的例图：

既然如此我们就先搭建一个本地服务吧；
1.偷懒方式直接利用vscode的插件，创建本地服务
在vscode编辑器上安装live server这个插件，安装成功后在右下角有一个Go Live的提醒，点击它就能打开当前文件并放到它创建的服务上了。

利用live server在浏览器上运行打开examples/commits/index.html文件，我们可以看到sourcemap已经生效了。

2.安装比较常用的webpack-dev-server

  npm install webpack-cli webpack-dev-server

在script命令中增加start增加webpack-dev-server 指令

"start": "webpack-dev-server",

然后运行npm run start
虽然报错的，但不影响本地服务的启动

同样可以启用sourcemap

记住你每次修改源码是用npm run dev这命令打包的，当然它有热更新功能，npm run start只是启动了本地服务，所以你可能需要启动两个进程来分别控制

手动debugger

我们除了可以在浏览器上进行debugger之外，还能在代码中直接写debugger
比如我们想试试src/core/index.js

重新打包后，用浏览器再次运行，就会马上进入debugger模式，直接定位到刚刚我们写有debugger的地方

结语

这样你就可以一步步看完所有vue源码了，呵呵，开玩笑的，你看不完~~~