Vue源码学习（一）：源码的入口在哪里

Vue源码解读系列

---

---

前言

  如何设计API和如何使用元编程思想（元编程，简单说是指框架的作者使用一种编程语言固有的语言特性，使得使用者能够以新语法和语义来构建应用程序，从而获得更好的开发体验）将新特性融入到框架中，是现代JS框架设计的两个核心，Vue.js侧重于后者。
  元编程思想涉及具体实现，需要考虑很多细节，比如要做到向下兼容，那么就要对一些特性的实现方式做成取舍，一些可通过书写向下兼容代码，另一些通过编译机制，还有一些要舍弃。这不仅在框架设计和实现的过程中会遇到，在具体实现应用程序的过程中也会遇到。
  因此，通过学习Vue.js，不仅能掌握设计应用程序框架的一般性技巧，还可以实现应用程序时运用其中的具体设计思想和方法论（学习源码也是对JS高级内容的一种实践）。

一、源码下载

1、首先找到Vue项目 github 地址：https://github.com/vuejs/vue

（这里学习源码下载的是2.6.14版本的）
2、安装依赖：下载完后进行npm install 或者yarn add all 安装依赖

3、启动项目：npm run dev ，在package.json文件中配置sourcemap，然后再执行npm run dev 会生成带编译版本的Vue.js和对应的.map文件，在源码解读时就可以引用dist目录下的 vue.js 文件，从而通过 vue.js.map 在浏览器中调试，就能关联到对应的源码文件。

// package.json
  "scripts": {
    "dev": "rollup -w -c scripts/config.js --environment TARGET:web-full-dev --sourcemap",
    ......
  },

二、目录解读

└── vue
    ├── BACKERS.md
    ├── FILE_README.md
    ├── LICENSE
    ├── README.md
    ├── benchmarks // 做性能测试的
    ├── dist // 最终打包的结果
    ├── examples // 官方的例子，可以写一些小demo调试
    ├── flow // 类型检测（和ts功能类似，没有ts好用，应该没人用了）
    ├── package.json // 项目依赖文件
    ├── packages  // 包含服务器渲染和模板编译两种npm包，供不同场景使用
    ├── scripts // 存放npm脚本配置文件，结合webpack、rollup进行编译、测试、构建等操作（使用者不需要关心）
    ├── src // 项目核心源码
    ├── test // test测试用例
    ├── types // vue新版本支持ts，主要是ts声明文件
    └── yarn.lock // yarn版本锁定文件

├─ src                         // 主要源码所在位置，核心内容
│   ├─ compiler                // 模板编译相关文件，将 template 编译为 render 函数
│       ├─ codegen             // 把AST(抽象语法树)转换为Render函数
│       ├─ directives          // 生成Render函数之前需要处理的东西
│       ├─ parser              // 模板编译成AST
│   ├─ core                    // Vue核心代码，包括了内置组件、全局API封装、Vue实例化、响应式原理、vdom(虚拟DOM)、工具函数等等。
│       ├─ components          // 组件相关属性，包含抽象出来的通用组件 如：Keep-Alive
│       ├─ global-api          // Vue全局API，如Vue.use(),Vue.nextTick(),Vue.config()等，包含给Vue构造函数挂载全局方法(静态方法)或属性的代码。 链接：https://012-cn.vuejs.org/api/global-api.html
│       ├─ instance            // 实例化相关内容，生命周期、事件等，包含Vue构造函数设计相关的代码
│       ├─ observer            // 响应式核心目录，双向数据绑定相关文件。包含数据观测的核心代码
│       ├─ util                // 工具方法
│       └─ vdom                // 虚拟DOM相关的代码，包含虚拟DOM创建(creation)和打补丁(patching)的代码
│   ├─ platforms               // vue.js和平台构建有关的内容 不同平台的不同构建的入口文件也在这里 （Vue.js 是一个跨平台的MVVM框架）
│       ├── web                // web端 （渲染，编译，运行时等，包括部分服务端渲染）
│       │   ├── compiler       // web端编译相关代码，用来编译模版成render函数basic.js
│       │   ├── entry-compiler.js               // vue-template-compiler 包的入口文件
│       │   ├── entry-runtime-with-compiler.js  // 独立构建版本的入口，它在 entry-runtime 的基础上添加了模板(template)到render函数的编译器
│       │   ├── entry-runtime.js                // 运行时构建的入口，不包含模板(template)到render函数的编译器，所以不支持 `template` 选项，我们使用vue默认导出的就是这个运行时的版本。
│       │   ├── entry-server-basic-renderer.js  // 输出 packages/vue-server-renderer/basic.js 文件
│       │   ├── entry-server-renderer.js        // vue-server-renderer 包的入口文件
│       │   ├── runtime        // web端运行时相关代码，用于创建Vue实例等
│       │   ├── server         // 服务端渲染（ssr）
│       │   └── util           // 工具类相关内容
│       └─ weex                // 混合运用 weex框架 (一端开发，三端运行: Android、iOS 和 Web 应用) 2016年9月3日~4日 尤雨溪正式宣布以技术顾问的身份加盟阿里巴巴Weex团队， 做Vue和Weex的整合 让Vue的语法能跨三端
│   ├─ server                  // 服务端渲染相关内容（ssr）
│   ├─ sfc                     // 转换单文件组件（*.vue）
│   └─ shared                  // 共享代码 全局共享的方法和常量

三、找到打包入口文件

进入package.json，可以看到入口文件是scripts文件夹下的config.js:

进入config.js，会对build对象进行解析，src/platforms/web下的entry-runtime.js和entry-runtime-with-compiler.js是构建入口（两个入口的区别：带compliler的会重写$mount,将template变成render函数）：

四、如何进行代码调试

在examples文件夹下新建html文件，写入demo，打debugger就可以进行浏览器调试：

总结

本文参考书籍：《深入浅出Vue.js》
视频：B站视频
博客：源码解读的正确姿势