对于要学习vue3源码的前端小伙伴来说，通过调试vue3源码来学习是一种不错的方法，本期来先容下调试方法。
一、下载vue3源码
先利用git clone命令把vue3源码从远程仓库克隆本地。
- git clone https://github.com/vuejs/core.git
二、安装依赖
vue3采用的是Monorepo + pnpm的方式来管理仓库的，所以我们须要通过pnpm install
来安装依赖，如果没有安装pnpm，须要先运行npm install pnpm -g安装下pnpm，注意node版本须要在16以上。
三、开发环境打包
安装完依赖之后，执行npm run dev命令进行开发环境打包。
打包后会生成两个文件:
- core/packages/vue/vue.global.js：以global方式打包后的vue文件
- core/packages/vue/vue.global.js.map：生成的源码映射文件，如许我们调试的时间就能映射到对应真实源码中的各个文件了。
这里其实还有npm run build命令，为啥要用npm run dev呢，紧张有两个缘故原由：
- 相比而言，npm run dev生成的文件更少，速率更快，
- npm run dev支持热更新，也就是我们可以手动修改vue源码后，会重新打包，如许可以很方便的在源码中增加debugger
四、编写vue代码，开始调试
我们可以在core/packages/vue/examples路径下增加一个test.html文件，代码如下：
- <!DOCTYPE html>
- <html lang="en">
- <head>
- <meta charset="UTF-8">
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
- <title>Document</title>
- </head>
- <body>
- <div id="app">
- <h1>计数：{{ count }}</h1>
- <button @click="handleClick(1)">+1</button>
- <button @click="handleClick(-1)">-1</button>
- <button @click="reset()">reset</button>
- </div>
- <script src="../dist/vue.global.js"></script>
- <script>
- const { ref, createApp } = Vue
- const App = {
- setup() {
- const count = ref(0);
- const handleClick = () => {
- debugger;
- count.value++
- }
- const reset = () => {
- count.value = 0
- }
- return {
- count,
- handleClick,
- reset,
- }
- }
- }
- createApp(App).mount('#app');
- </script>
- </body>
- </html>
我们点击“+1”按钮后，浏览器就会在debugger那边停住，如许就可以开始调试vue源码了。
前面说过，执行npm run dev是有热更新功能的，我们直接找到ref对应的源码文件/core/packages/reactivity/src/ref.ts，找到对应的ref方法，增加debugger。
增加代码并保存文件之后，会发现热更新生效了，重新打包了一次，生成了新的vue.global.js和vue.global.js.map文件，再返来我们之前的页面进行革新，会看到浏览器就会停在我们刚刚增加的断点位置。
五、怎样在vscode中调试vue3源码？
如果你不太喜欢在浏览器调试，你还可以在vscode中调试。
这里须要先启动一个静态服务，这里我直接用http-server来实现，如果没安装的话先执行npm i http-server -g安装一下。
它的用法很简单，直接在对应的目录执行http-server命令就好了，这里我直接在根目录启动静态服务。
然后在vscode中调试配置文件launch.json中增加如下调试程序：
- {
- "version": "0.2.0",
- "configurations": [
- + {
- + "type": "chrome",
- + "request": "launch",
- + "name": "debugger vue source",
- + "url": "http://localhost:8080/packages/vue/examples/test.html",
- + "webRoot": "${workspaceFolder}"
- + },
- ]
- }
然后我们就可以点击开始按钮进行调试了：
vscode会启动浏览器，并访问我们配置的网页url路径，而且断点也生效了。
如许的话，我们打断点也会很方便，直接利用vscode文件行号左边的小红点就好了，这里就不多说了。
六、实战：怎样在实际vue项目中调试vue3源码？
如果我们想在实际vue项目中调试vue源码，要怎么做呢？
6.1、创建vue项目
我们先利用vue-cli创建一个vue3项目：
- 执行vue create vue3-demo命令创建项目，选择vue3版本
- 通过npm run serve把项目跑起来。
须要修改下devtool配置：
- const { defineConfig } = require('@vue/cli-service')
- module.exports = defineConfig({
- transpileDependencies: true,
- + configureWebpack: config => {
- + config.devtool = 'source-map';
- + }
- })
在App.vue中增加如下代码：
- import { onMounted } from 'vue';
- onMounted(() => {
- debugger;
- })
然后创建vscode的调试文件，如下所示。
- {
- "version": "0.2.0",
- "configurations": [
- {
- "type": "chrome",
- "request": "launch",
- "name": "debugger vue3 source",
- "url": "http://localhost:8080",
- "webRoot": "${workspaceFolder}",
- }
- ]
- }
通过断点进入vue源码后，发现调试的文件是E:/code/vue3-demo/node_modules/@vue/runtime-core/dist/runtime-core.esm-bundler.js，这显然是打包后的文件，不符合我们的预期，我们须要调试的是代码源文件。
6.5、修改vue源码中rollup.config.js
默认通过pnpm run build打包是不生成sourcemap，我们须要修改下rollup.config.js中的配置文件，使其产出sourcemap。
- // rollup.config.js
- - output.sourcemap = !!process.env.SOURCE_MAP
- + output.sourcemap = true
可以看到带有.map后缀的sourcemap文件已经生成了。
随后将生成的E:\code\vue3-demo\node_modules\@vue\runtime-core\dist目录，替换掉我们之前项目里的文件目录，我这里是E:/code/vue3-demo/node_modules/@vue/runtime-core/dist。
替换完毕后，重新跑下npm run serve，然后重新跑下调试。
虽然进到了通过sourcemap进入到了源码文件，但这个路径显着不是本地的路径，导致这个文件仅仅是readonly可读的，如许对调试也不太友好。
这里体现的路径的E:/code/src/apiLifecycle.ts，而我们真实的文件路径是E:\code\core\packages\runtime-core\src\apiLifecycle.ts，没对应上，自然就只读了。
我们须要通过rollup的output.sourcemapPathTransform修改下生成的sourcemap文件路径:
- // rollup.config.js
- + output.sourcemapPathTransform = (relativeSourcePath, sourcemapPath) => {
- + const newSourcePath = path.join(
- + path.dirname(sourcemapPath),
- + relativeSourcePath,
- + )
- + return newSourcePath
- + }
- relativeSourcePath: ..\..\runtime-core\src\apiLifecycle.ts
- sourcemapPath：E:\code\core\packages\vue-compat\dist\vue.runtime.esm-browser.prod.js.map
- newSourcePath：E:\code\core\packages\runtime-core\src\apiLifecycle.ts
然后重新执行npm run build，再把之前说的dist文件再替换一次。
再次重新运行npm run serve之前，须要清空下babel-loader缓存：rm -rf node_modules/.cache/babel-loader/。
如许就ok了，对应上了本地的源码文件，这个文件也能修改了。
6.6、调试 create-vite 创建的 vue 项目
如果通过vite跑的vue项目，须要注意两点：
- export default defineConfig({
- plugins: [vue()],
- + optimizeDeps: {
- + exclude: ['vue']
- + }
- })
- 如果已经被处置惩罚过，须要rm -rf node_modules/.vite扫除缓存
七、小结
上述先容了怎样在各种场景中调试vue3源码，希望对大家有资助！
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。 |
