文章目录
- 前言
- （1）vue 项目构建的时候，通过package.json文件看到构建入口
- （2） 构建入口页面：导入同级模块config的getAllbuilds方法
- （3） 通过传入参数中的builds对象使用map获取
- （4） 通过builds对象过滤后拿到了引入vue的文件
- （5） 通过第（4）步找到下一个导出vue的文件
- （6） 通过第（5）步找到下一个导出vue的文件
- （7） 通过第（6）步找到下一个导出vue的文件
- （8） 通过第（7）步找到下一个导出vue的文件
- (9) 最终发现Vue其实是个函数
- 总结
前言
vue源码是基于rollup构建的，rollup是一个轻量级构建工具，非常适合js库的源码构建，因为它只编译js。
（1）vue 项目构建的时候，通过package.json文件看到构建入口
路径：
vue\package.json
（2） 构建入口页面：导入同级模块config的getAllbuilds方法
路径：
vue\scripts\build.js
（3） 通过传入参数中的builds对象使用map获取
builds中拿到所有的配置，然后通过命令行参数过滤掉不需要的配置，最后将入口配置返回到build.js中，并调用build方法进行构建。
路径：
scripts\config.js
（4） 通过builds对象过滤后拿到了引入vue的文件
路径：
vue\src\platforms\web\entry-runtime-with-compiler.ts
（5） 通过第（4）步找到下一个导出vue的文件
路径：
vue\src\platforms\web\runtime-with-compiler.ts
注意点：这里挂载了$mounted方法
（6） 通过第（5）步找到下一个导出vue的文件
路径：
vue\src\core\index.ts
（7） 通过第（6）步找到下一个导出vue的文件
路径：
vue\src\core\index.ts
（8） 通过第（7）步找到下一个导出vue的文件
路径：
vue\src\core\instance\index.ts
(9) 最终发现Vue其实是个函数
问题：为什么这里使用的es5的方法，而不是 es6 的 class ？
原因：如下图，第（8）步中的initMixin等方法（路径：vue\src\core\instance\init.ts）都是放到原型上的，将vue的原型拆分成多个文件，不同的逻辑按照代码的逻辑组织关系，有利于维护代码。
