调试准备
调试源码需要用到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的配置直接使用以下命令打包
打包出的代码位于packages/vue/dist文件夹下，带有sourcemap文件
这里为了方便使用已经上传了cdn
引入
引入有两种方式
webpack externals
使用webpack external掉vue然后再通过全局引入Vue变量，这里全局引入的Vue是我们之前打包好的带有sourcemap的。这里引入的是production的打包，所以调试的时候不能使用serve命令，需要先把production模式下的产物输出在通过serve dist进行调试，这样可以省略到很多在production模式下不需要的代码比如hmr。当然如果想在development模式下调试的话可以引入develeopment模式下的Vue。
后续引入的vue都是production模式下的。
全局vue文件位于 https://cdn.jsdelivr.net/npm/xiaochuan-vue3-source@0.0.5/dist/3.3.4/vue.global.prod.js
使用@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>
运行下面命令就能断点到源码里面了
在浏览器里面我们把断点打到main.js的createApp那行，断点生效后点击step into(图1左下角)跳进函数声明，可以看到图2以及正确跳进了vue3的源码的createApp函数声明里面
webpack external方式的源码位于examples/demo-webpack
vite externals
vite使用esm，打包出的文件也有esm的版本。由于在production模式下vite使用的是rollup，修改rollup的externals配置在通过importmap引入打包好后的esm vue。
esm模块的vue文件位于https://cdn.jsdelivr.net/npm/xiaochuan-vue3-source@0.0.5/dist/3.3.4/vue.esm-browser.prod.js
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>
运行下面命令
断点的步骤和webpack方式externals一样
可以看到表现和webpack方式引入的vue一样
vite引入方式的demo代码位于examples/demo-vite
总结
通过打包出带有sourcemap的vue产物再通过externals的方式引入就可以在源码里面进行断点了。这里两种方式引入表现都是一样的。
后续的demo都以webpack方式引入
