vue3 开启本地调试

实习生小黄
108 阅读2分钟

前言

最近在进行 vue3 源码的学习，将掘金作为学习笔记，记录一下学习的过程以及自己的理解，从0开始搭建 mini-vue。

vue 如何开启本地调试

下载 vue 源码

github 官网进行下载，可以通过 git 下载，也可以直接通过 download zip 进行下载，内容是一样的

创建测试html

下载完vue项目之后，我们现在本地进行打包，通过：

pnpm i

安装依赖，然后通过

npm run build

进行打包，之后我们就能够在项目的 /packages/vue/dist 中找到打包文件，然后我们通过创建一个简单的html文件来引入这个打包文件，并且尝试着使用 reactive。

<!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>
   <script src="../../dist/vue.global.js"></script>
</head>

<body>
   <div id="app"></div>
</body>
<script>
   const { reactive } = Vue

   const obj = reactive({
       name: '张三'
   })
</script>
</html>

image.png

但是因为我们引入的是vue的打包文件，所以这里哪怕通过断点也看不到任何源码中的内容，所以我们要来开启 SourceMap 方便我们之后的断点调试。

开启 SourceMap

在 vue 的打包命令中，我们会发现，其实打包就是执行 script 底下的 build 文件，那么我们在 build 文件当中能够找到这一段代码

await execa(
    'rollup',
    [
      '-c',
      '--environment',
      [
        `COMMIT:${commit}`,
        `NODE_ENV:${env}`,
        `TARGET:${target}`,
        formats ? `FORMATS:${formats}` : ``,
        buildTypes ? `TYPES:true` : ``,
        prodOnly ? `PROD_ONLY:true` : ``,
        sourceMap ? `SOURCE_MAP:true` : ``
      ]
        .filter(Boolean)
        .join(',')
    ],
    { stdio: 'inherit' }
  )

根据 sourceMap 我们能够找到设置这个变量的位置：

const args = require('minimist')(process.argv.slice(2))
console.log("🚀 ~ file: build.js:26 ~ args:", args)
...
const sourceMap = args.sourcemap || args.s

minimist 是一个 解析参数选项 的第三方库，用于解析命令行命令后面携带的额外参数

然后我们尝试着在打包命令中增加参数，并且重新打包

node scripts/build.js -s
🚀 ~ file: build.js:26 ~ args: { _: [], s: true }

这时候我们就可以看见控制台输出的参数，其中 s 变成了 true ，那么我们也就找到了开启 SoucreMap 的位置，然后就可以通过修改 packjson 中的打包命令，来开启 SoucreMap

 "build": "node scripts/build.js -s",

然后我们重新打包，回到最开始的测试文件当中

image.png

找到 reactive 文件，在其中我们就能够找到 reactive 这个函数，在其中打一个断点，然后刷新浏览器。

image.png

这样我们就成功开启了源码中的断点

总结

本文作为 vue 源码学习的第一篇，主要是记录一下 vue3 源码开启调试的方法。

avatar
文章
阅读
粉丝