Vue源码分析之-源码下载和打包调试

目录

准备工作

1、vue.js源代码获取

可以直接网页下载源代码：

或者 通过git clone下载：

个人推荐的阅读源码的方式：

目录结构解读

了解Flow

调试设置

打包

安装依赖

设置sourcemap

执行dev进行开发构建调试

打包结果

如何调试

---

准备工作

1、vue.js源代码获取

Vue.js：这里我们演示解读的是Vue.js 2.6版本，

可以直接网页下载源代码：

https://github.com/vuejs/vue.githttps://github.com/vuejs/vue.git

或者 通过git clone下载：

git clone git@github.com:vuejs/vue.git

个人推荐的阅读源码的方式：

先fork一份拷贝到作为自己的一个repository，再克隆到本地进行打包，之后可以在本地调试的过程中添加自己的阅读理解相关的注释。之后提交到GitHub，以便自己后续的复习，防止自己在多终端或多机器上回顾时忘记自己已经看过的内容，以及同行新人伙伴的学习。

目录结构解读

首先我们git clone获取到的是当前项目的主分支main中的源码，也就是Vue 3.0版本的源码目录：

$ tree --dirsfirst -C -vl ./
./
├── benchmarks
│   ├── big-table
│   │   ├── demo.css
│   │   ├── index.html
│   │   └── style.css
│   ├── dbmon
│   │   ├── lib
│   │   │   ├── memory-stats.js
│   │   │   ├── monitor.js
│   │   │   └── styles.css
│   │   ├── ENV.js
│   │   ├── app.js
│   │   └── index.html
│   ├── reorder-list
│   │   └── index.html
│   ├── ssr
│   │   ├── README.md
│   │   ├── common.js
│   │   ├── renderToStream.js
│   │   └── renderToString.js
│   ├── svg
│   │   └── index.html
│   └── uptime
│       └── index.html
├── compiler-sfc
│   ├── index.d.ts
│   ├── index.js
│   ├── index.mjs
│   └── package.json
├── dist ································· 打包之后的结果存放目录，多个版本的vue打包结果
│   ├── vue.common.js
│   └── vue.runtime.common.js
├── examples ····························· 示例，通过示例可以快速体会vue的基本使用方式
│   ├── classic
│   │   ├── commits
│   │   │   ├── app.js
│   │   │   └── index.html
│   │   ├── elastic-header
│   │   │   ├── index.html
│   │   │   └── style.css
│   │   ├── firebase
│   │   │   ├── app.js
│   │   │   ├── index.html
│   │   │   └── style.css
│   │   ├── grid
│   │   │   ├── grid.js
│   │   │   ├── index.html
│   │   │   └── style.css
│   │   ├── markdown
│   │   │   ├── index.html
│   │   │   └── style.css
│   │   ├── modal
│   │   │   ├── index.html
│   │   │   └── style.css
│   │   ├── move-animations
│   │   │   └── index.html
│   │   ├── select2
│   │   │   └── index.html
│   │   ├── svg
│   │   │   ├── index.html
│   │   │   ├── style.css
│   │   │   └── svg.js
│   │   ├── todomvc
│   │   │   ├── app.js
│   │   │   ├── index.html
│   │   │   └── readme.md
│   │   └── tree
│   │       ├── index.html
│   │       └── tree.js
│   └── composition
│       ├── commits.html
│       ├── grid.html
│       ├── markdown.html
│       ├── svg.html
│       ├── todomvc.html
│       └── tree.html
├── packages
│   ├── compiler-sfc
│   │   ├── src
│   │   │   ├── stylePlugins
│   │   │   │   ├── scoped.ts
│   │   │   │   └── trim.ts
│   │   │   ├── templateCompilerModules
│   │   │   │   ├── assetUrl.ts
│   │   │   │   ├── srcset.ts
│   │   │   │   └── utils.ts
│   │   │   ├── babelUtils.ts
│   │   │   ├── compileScript.ts
│   │   │   ├── compileStyle.ts
│   │   │   ├── compileTemplate.ts
│   │   │   ├── cssVars.ts
│   │   │   ├── index.ts
│   │   │   ├── parse.ts
│   │   │   ├── parseComponent.ts
│   │   │   ├── prefixIdentifiers.ts
│   │   │   ├── rewriteDefault.ts
│   │   │   ├── stylePreprocessors.ts
│   │   │   ├── types.ts
│   │   │   └── warn.ts
│   │   ├── test
│   │   │   ├── __snapshots__
│   │   │   │   ├── compileScript.spec.ts.snap
│   │   │   │   └── cssVars.spec.ts.snap
│   │   │   ├── compileScript.spec.ts
│   │   │   ├── compileStyle.spec.ts
│   │   │   ├── compileTemplate.spec.ts
│   │   │   ├── cssVars.spec.ts
│   │   │   ├── parseComponent.spec.ts
│   │   │   ├── prefixIdentifiers.spec.ts
│   │   │   ├── stylePluginScoped.spec.ts
│   │   │   ├── tsconfig.json
│   │   │   └── util.ts
│   │   ├── api-extractor.json
│   │   └── package.json
│   ├── server-renderer
│   │   ├── src
│   │   │   ├── bundle-renderer
│   │   │   │   ├── create-bundle-renderer.ts
│   │   │   │   ├── create-bundle-runner.ts
│   │   │   │   └── source-map-support.ts
│   │   │   ├── directives
│   │   │   │   ├── index.ts
│   │   │   │   ├── model.ts
│   │   │   │   └── show.ts
│   │   │   ├── modules
│   │   │   │   ├── attrs.ts
│   │   │   │   ├── class.ts
│   │   │   │   ├── dom-props.ts
│   │   │   │   ├── index.ts
│   │   │   │   └── style.ts
│   │   │   ├── optimizing-compiler
│   │   │   │   ├── codegen.ts
│   │   │   │   ├── index.ts
│   │   │   │   ├── modules.ts
│   │   │   │   ├── optimizer.ts
│   │   │   │   └── runtime-helpers.ts
│   │   │   ├── template-renderer
│   │   │   │   ├── create-async-file-mapper.ts
│   │   │   │   ├── index.ts
│   │   │   │   ├── parse-template.ts
│   │   │   │   └── template-stream.ts
│   │   │   ├── webpack-plugin
│   │   │   │   ├── client.ts
│   │   │   │   ├── server.ts
│   │   │   │   └── util.ts
│   │   │   ├── compiler.ts
│   │   │   ├── create-basic-renderer.ts
│   │   │   ├── create-renderer.ts
│   │   │   ├── index-basic.ts
│   │   │   ├── index.ts
│   │   │   ├── render-context.ts
│   │   │   ├── render-stream.ts
│   │   │   ├── render.ts
│   │   │   ├── util.ts
│   │   │   └── write.ts
│   │   ├── test
│   │   │   ├── fixtures
│   │   │   │   ├── app.js
│   │   │   │   ├── async-bar.js
│   │   │   │   ├── async-foo.js
│   │   │   │   ├── cache-opt-out.js
│   │   │   │   ├── cache.js
│   │   │   │   ├── error.js
│   │   │   │   ├── nested-cache.js
│   │   │   │   ├── promise-rejection.js
│   │   │   │   ├── split.js
│   │   │   │   ├── test.css
│   │   │   │   ├── test.png
│   │   │   │   └── test.woff2
│   │   │   ├── async-loader.js
│   │   │   ├── compile-with-webpack.ts
│   │   │   ├── ssr-basic-renderer.spec.ts
│   │   │   ├── ssr-bundle-render.spec.ts
│   │   │   ├── ssr-stream.spec.ts
│   │   │   ├── ssr-string.spec.ts
│   │   │   ├── ssr-template.spec.ts
│   │   │   └── tsconfig.json
│   │   ├── types
│   │   │   ├── index.d.ts
│   │   │   ├── plugin.d.ts
│   │   │   ├── test.ts
│   │   │   └── tsconfig.json
│   │   ├── README.md
│   │   ├── client-plugin.d.ts
│   │   ├── index.js
│   │   ├── package.json
│   │   └── server-plugin.d.ts
│   └── template-compiler
│       ├── types
│       │   ├── index.d.ts
│       │   ├── test.ts
│       │   └── tsconfig.json
│       ├── README.md
│       ├── index.js
│       └── package.json
├── scripts
│   ├── git-hooks
│   │   ├── commit-msg
│   │   └── pre-commit
│   ├── alias.js
│   ├── build.js
│   ├── config.js
│   ├── feature-flags.js
│   ├── gen-release-note.js
│   ├── release.js
│   └── verify-commit-msg.js
├── src ····································· 源码部分，代码按不同的功能拆分到文件夹
│   ├── compiler ···················· 编译器代码，编译的作用时把模版转化为render函数，而render函数会帮我们创建虚拟DOM 
│   │   ├── codegen
│   │   │   ├── events.ts
│   │   │   └── index.ts
│   │   ├── directives
│   │   │   ├── bind.ts
│   │   │   ├── index.ts
│   │   │   ├── model.ts
│   │   │   └── on.ts
│   │   ├── parser
│   │   │   ├── entity-decoder.ts
│   │   │   ├── filter-parser.ts
│   │   │   ├── html-parser.ts
│   │   │   ├── index.ts
│   │   │   └── text-parser.ts
│   │   ├── codeframe.ts
│   │   ├── create-compiler.ts
│   │   ├── error-detector.ts
│   │   ├── helpers.ts
│   │   ├── index.ts
│   │   ├── optimizer.ts
│   │   └── to-function.ts
│   ├── core ···································· vue的核心（与平台无关）
│   │   ├── components ························· 组件相关
│   │   │   ├── index.ts
│   │   │   └── keep-alive.ts ·················· 定义了vue自带的keep-alive组件
│   │   ├── global-api ·························· 定义了Vue中的全局静态方法，包含Vue.component(),Vue.filter(),Vue.extend(),Vue.mixin(),Vue.use()等
│   │   │   ├── assets.ts
│   │   │   ├── extend.ts
│   │   │   ├── index.ts
│   │   │   ├── mixin.ts
│   │   │   └── use.ts
│   │   ├── instance ···························· 创建vue实例相关，定义了vue的构造函数，以及Vue的初始化，以及生命周期挂钩相应的函数
│   │   │   ├── render-helpers
│   │   │   │   ├── bind-dynamic-keys.ts
│   │   │   │   ├── bind-object-listeners.ts
│   │   │   │   ├── bind-object-props.ts
│   │   │   │   ├── check-keycodes.ts
│   │   │   │   ├── index.ts
│   │   │   │   ├── render-list.ts
│   │   │   │   ├── render-slot.ts
│   │   │   │   ├── render-static.ts
│   │   │   │   ├── resolve-filter.ts
│   │   │   │   ├── resolve-scoped-slots.ts
│   │   │   │   └── resolve-slots.ts
│   │   │   ├── events.ts
│   │   │   ├── index.ts
│   │   │   ├── init.ts
│   │   │   ├── inject.ts
│   │   │   ├── lifecycle.ts
│   │   │   ├── proxy.ts
│   │   │   ├── render.ts
│   │   │   └── state.ts
│   │   ├── observer ··························· 响应式数实现相关代码，原理层重点核心
│   │   │   ├── array.ts
│   │   │   ├── dep.ts
│   │   │   ├── index.ts
│   │   │   ├── scheduler.ts
│   │   │   ├── traverse.ts
│   │   │   └── watcher.ts
│   │   ├── util ······························· 抽取的出来可重用的工具函数成员定义
│   │   │   ├── debug.ts
│   │   │   ├── env.ts
│   │   │   ├── error.ts
│   │   │   ├── index.ts
│   │   │   ├── lang.ts
│   │   │   ├── next-tick.ts
│   │   │   ├── options.ts
│   │   │   ├── perf.ts
│   │   │   └── props.ts
│   │   ├── vdom ······························ 虚拟DOM相关代码，重写了snabbdom