Vue源码阅读-1. 环境配置

FireBushtree
312 阅读2分钟

Vue源码-环境配置

前言

自从去年跳槽后，公司项目一直使用React.js开发，没怎么接触Vue。 之前Vue2的源码也稍微看过， 但是总是东拼西凑的，非常碎片化，对框架的理解并没有什么实际提升，说大白话就是我只知道Object.definePrototype，你敢问我别的，我就敢说不知道。趁着Vue3.0发布这么久了，立个Flag，这次一定努力学习源码。

概述

本文旨在介绍使用vscode调试vue.js的源码。

毕竟鲁迅曾经说过："工欲善其事，必先利其器"。前期不搭建好工作环境，不利于接下来的学习准备。

本地项目构建

  1. Vue3的源码托管在github上， 项目名称是vue-next， 如果你懒得搜github， 就直接戳我。 不过最近github的连接貌似不太稳定，clone一下要好久。

  2. 获取项目以后使用

    yarn

    安装依赖

  3. 然后使用

    yarn build -s

    打包项目。 注意 -s 非常重要。 因为这样才能获取source maps。否则不能对ts文件原汁原味的调试。 具体可以参考Vue3的contributing.md。

    这里说一个小插曲， 我本地打包过程中packages/sfc-playground/src中没有index.ts文件，会导致打包中断，为此我还去提了一个issue但是官方回复没问题。

    于是我就在packages/sfc-playground/src目录下自己新建了一个index.ts， 里面随便写写东西，就能打包成功了。（其实我最先想到的是打包的时候把这个文件过滤掉但是感觉还是新建一个index.ts方便一点。这个项目是用来演示用的，删了也没关系，反正又不是不能用。）

image.png

  1. 打包成功后， 应该能看到package/*文件夹中都出现了dist文件夹，此时我们把焦点放在package/vue文件夹，里面有一个examples文件，是Vue官方提供的例子，可以直接这些例子调试。但是我不用， 我就是要自己写。

  2. 在项目根目录下新建demo.html， 并填充如下代码

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="app"></div>
  <script src="./packages/vue/dist/vue.global.js"></script>
  <script>
    Vue.createApp({
      data() {
        return {
          a: 1
        }
      },

      methods: {
        handleAdd() {
          this.a += 1
        }
      },

      template: `
        <div>
          <span>{{a}}</span>
          <button @click="handleAdd">click +1</button>
        </div>
      `
    }).mount('#app')
  </script>
</body>
</html>

大概就是长这样

image.png

配置调试环境

debug for chrome

首先在vscode插件中搜索Debugger for Chrome， 安装完成后打开项目根目录下的.vscode/launch.json文件，并在configurations中新增如下配置

    {
      "type": "chrome",
      "request": "launch",
      "name": "Debug demo",
      "webRoot": "${workspaceFolder}",
      "file": "${workspaceFolder}/demo.html",
    },

image.png

接下来在demo.html中打上断点，将调试切换为Debug demo， 并点击小箭头就可以原汁原味的调试了。

Jest-单元测试调试

Vue官方已经为单元测试配置了vscode的调试文件， 不用做额外配置。

  1. 首先将调试切换为Jest

  2. 以packages/reactivity/__tests__/reactive.spec.ts为例，直接打好断点，并按下F5就可以进入调试模式了

avatar
文章
阅读
粉丝