vue3源码调试指南

站长

2023年09月24日 15:59 · 阅读数 18

vue3源码调试指南

本文选自vue3源码解析，更多内容见左边源网站，正在连载中

github链接

调试准备

调试源码需要用到chrome devtools的断点以及performance record

确定vue3的具体版本

在开始之前我们需要确定使用的vue3的版本，这里的版本指的是小版本，很重要，会和后面的sourcemap一一对应。我这里选择的是3.3.4。将上文中clone到本地的源码reset到对应的版本

git reset --hard v3.3.4

本项目使用的vue版本为3.3.4

打包出带有sourcemap的版本

vue3的源码使用rollup打包，根据rollup的配置直接使用以下命令打包

pnpm build -s

打包出的代码位于packages/vue/dist文件夹下，带有sourcemap文件

vue3源码调试指南

这里为了方便使用已经上传了cdn

引入

引入有两种方式

webpack externals

使用webpack external掉vue然后再通过全局引入Vue变量，这里全局引入的Vue是我们之前打包好的带有sourcemap的。这里引入的是production的打包，所以调试的时候不能使用serve命令，需要先把production模式下的产物输出在通过serve dist进行调试，这样可以省略到很多在production模式下不需要的代码比如hmr。当然如果想在development模式下调试的话可以引入develeopment模式下的Vue。

后续引入的vue都是production模式下的。

全局vue文件位于 cdn.jsdelivr.net/npm/xiaochu…

使用@vue/cli创建的项目可以直接修改webpack的配置

/**
 * @type {import('@vue/cli-service').ProjectOptions}
 */
const config = {
  configureWebpack: {
    externals: {
      vue: 'Vue',
    },
    devtool: 'source-map',
  },
};

module.exports = config;

<!DOCTYPE html>
<html lang="">
  <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">
    <link rel="icon" href="<%= BASE_URL %>favicon.ico">
    <title><%= htmlWebpackPlugin.options.title %></title>
+ <script src="https://cdn.jsdelivr.net/npm/xiaochuan-vue3-source@0.0.5/dist/3.3.4/vue.global.prod.js"></script>
  </head>
  <body>
    <noscript>
      <strong>We're sorry but <%= htmlWebpackPlugin.options.title %> doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!-- built files will be auto injected -->
  </body>
</html>

运行下面命令就能断点到源码里面了

pnpm build
pnpm start

在浏览器里面我们把断点打到main.js的createApp那行，断点生效后点击step into(图1左下角)跳进函数声明，可以看到图2以及正确跳进了vue3的源码的createApp函数声明里面

vue3源码调试指南

webpack external方式的源码位于examples/demo-webpack

vite externals

vite使用esm，打包出的文件也有esm的版本。由于在production模式下vite使用的是rollup，修改rollup的externals配置在通过importmap引入打包好后的esm vue。

esm模块的vue文件位于cdn.jsdelivr.net/npm/xiaochu…

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [vue()],
+  build: {
+    sourcemap: true,
+    rollupOptions: {
+      external: ['vue'],
+    },
+  },
});

<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Vite + Vue</title>
+ <script type="importmap">
+      {
+        "imports": {
+          "vue": "https://cdn.jsdelivr.net/npm/xiaochuan-vue3-source@0.0.5/dist/3.3.4/vue.esm-browser.prod.js"
+        }
+      }
+    </script>
  </head>
  <body>
    <div id="app"></div>
    <script type="module" src="/src/main.js"></script>
  </body>
</html>

运行下面命令

pnpm build
pnpm start

断点的步骤和webpack方式externals一样

vue3源码调试指南

可以看到表现和webpack方式引入的vue一样

vite引入方式的demo代码位于examples/demo-vite

总结

通过打包出带有sourcemap的vue产物再通过externals的方式引入就可以在源码里面进行断点了。这里两种方式引入表现都是一样的。

后续的demo都以webpack方式引入