vue3源码分析(1)一环境搭建

1.下载vue3源码

从github下载core-3.5.7版本vue源码，解压源码zip文件。

在执行打包命令npm run build时，打包报错，如下图所示。通过初始化本地仓库解决，使用命令git init和git add。如果只是使用npm run dev调试vue源代码，不需要初始化本地仓库。

2.安装依赖

vue3采用的是Monorepo + pnpm的方式来管理仓库的，通过pnpm安装依赖，首先通过pnpm -version是否安装了pnpm，如果没有安装pnpm则先安装。

shell 复制代码

pnpm install

3.开发环境打包

安装完依赖后，执行npm run dev开发环境打包。

打包后生成两个文件：

vue.global.js：以global方式打包后的vue文件;
vue.global.js.map：生成的源码映射文件，这样我们调试的时候就能映射到对应真实源码中的各个文件了。

这里其实还有npm run build命令，为啥要用npm run dev呢，主要有两个原因：

相比而言，npm run dev生成的文件更少，速度更快，
npm run dev支持热更新，也就是我们可以手动修改vue源码后，会重新打包，这样可以很方便的在源码中增加debugger

4.编写vue代码

在core/packages/vue/examples中创建/my/index.html，代码如下：

html 复制代码

<!doctype html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <script src="/packages/vue/dist/vue.global.js"></script>
  <title>vue</title>
</head>

<body>
  <div id="app">
    <my-component></my-component>
  </div>
  <script>
    const { createApp, ref, computed, onMounted } = Vue
    const app = createApp({});
    app.component(
      'MyComponent',
      {
        template: '<div><div>{{ count }} - {{ doubleData }}</div><button @click="increment">增加</button></div>',
        setup() {
          let count = ref(1);
          const doubleData = computed(() => count.value * 2);
          const increment = () => count.value++;
          onMounted(() => { console.log('mounted') });
          return { count, doubleData, increment }; //暴露给模板
        }
      }
    )
    app.mount('#app');
  </script>
</body>

</html>

选中index.html文件，点击右键弹出弹框，选择Open with Live Server，运行html。

运行结果：

5.调试

在core/packages/runtime-core/apiCreateApp.ts中添加调试debugger，在createApp方法中添加debugger并且保存，因为npm run dev是有热更新功能的，会重新打包一次，生成新的vue.global.js和vue.global.js.map文件，生成新的vue.global.js包含了有调试断点代码。

打开谷歌浏览器调试面板，运行index.html，浏览器会停在createApp中添加的断点的位置。

注意到，我们在html中引入的是打包后的vue.global.js文件，浏览器中调试的代码在真实源代码的apiCreateApp.ts中。

源码映射文件vue.global.js.map做了映射。在使用esbuild打包的时候，在core/scripts/dev.js中配置使用sourcemap，如下图所示：

参考文献：