likes
comments
collection
share

重读vue源码（1）—— 调试环境搭建，为何狗焕心事重重？

作者站长头像
站长
· 阅读数 58

今天，兄弟狗焕心事重重的找到我。

面试官问他：你是怎么读vue源码的，能不能把源码调试过程跟我说一下？

狗焕拽进了拳头，憋了半天，敢怒不敢言。

我看穿了他的心事，写下这篇文档，希望我的兄弟狗焕可以如从前那样，快乐的在夕阳下奔跑，开心起来。

现在进入正题，发车了。

以下是本文目录：

第一步：从github上拉取代码
第二步：更新匹配的node和npm版本
第三步：全局安装pnpm，并安装依赖
第四步：修改配置文件并打包
第五步：创建测试例子
最后：写在最后

第一步：从github上拉取代码

先拉取github上vue的包，地址在这里。最近因为某些国际上的问题，查看github的项目非常卡顿，而且我买的一个梯子也不太用，我直接下载zip包，效果也是一样的。

重读vue源码（1）—— 调试环境搭建，为何狗焕心事重重？

第二步：更新匹配的node和npm版本

这一步需要特别注意一下，因为目前我拉取的是最新的vue版本包2.7.10，他的packageManager也是用的pnpm，所以我想试试新东西pnpm安装一下依赖包（使用yarn或者npm的朋友可以用你们自己的版本）。

我自己是用的nvm的node版本控制工具，因为在安装好了pnpm之后提示最好在node@14+的版本下使用，我就直接把node版本切换到了15.6.0，npm默认版本是7.4.0

第三步：全局安装pnpm，并安装依赖

1、全局安装pnpm

npm i pnpm -g

这里遇到了问题，让我升级npm包

重读vue源码（1）—— 调试环境搭建，为何狗焕心事重重？ 于是将npm包版本升级到了8.18.0

2.执行pnpm安装依赖

pnpm i

包安装成功了，pnpm果然很快。

第四步：修改配置文件并打包

  1. 先修改package.json中的dev执行脚本，增加了--sourcemap的配置，即让打包后的代码能够通过打断点的方式，自动跳转到具体的执行文件下。
- "dev": "rollup -w -c scripts/config.js --environment TARGET:full-dev",
+ "dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:full-dev",
  1. 执行pnpm run dev，打包文件，生成dist文件夹，打包后的文件就存储在这个文件夹下面

重读vue源码（1）—— 调试环境搭建，为何狗焕心事重重？

第五步：创建测试例子

在example文件夹下面创建一个01test.html文件，然后测试一下是否能够正常运行。

<body>
  <div id="app">
    <p>计数器：{{count}}</p>
  </div>
<script src="../dist/vue.js"></script>
<script>
new Vue({
  el: '#app',
  data() {
    return {
      count: 1
    }
  },
  created() {
    setTimeout(() => {
      this.count++;
    }, 2000)
  }
})
</script>
</body>

测试通过，完美。

重读vue源码（1）—— 调试环境搭建，为何狗焕心事重重？

我的兄弟狗焕，打个断点试试（截图如下），然后就可以根据具体的函数跳转到对应的ts文件找到执行逻辑啦。

重读vue源码（1）—— 调试环境搭建，为何狗焕心事重重？

写在最后

看完这篇文档，果然兄弟狗焕开心的回到电脑前开始学习。

如果这篇文档对你有帮助，欢迎点赞、关注或者在评论区留言，我会第一时间对你的认可进行回应。

转载自:https://juejin.cn/post/7136868915275104293
评论
请登录