vue源码解析（一）

vue源码解析（一）

先决条件

• 需要能够熟悉使用 vue ，了解vue属性和方法。
• 带着问题去看源码
• 熟悉ES6或者Typescript语法
• 确定源码的版本，我看的是 2.6.12

从哪文件开始看vue源码？

现在前端开发，都是用 npm 管理我们开发中经常使用各种依赖包，vue也不例外，所以，我们下载源码后，先找到 package.json 文件，知道编译脚本的文件代码和执行vue的入口文件代码是哪个。

如上图，我们找到了执行vue入口文件（dist/vue.runtime.common.js）和build 脚本执行文件(scripts/build/js)。

---

先看 build 脚本执行文件代码

在 scripts/build.js文件中，可以看到执行了 build()方法，这个方法主要作用就是循环使用 rollup 插件来编译打包我们模块代码，rollup 和 webpack 类似，不过主要打包 js 文件，开发纯js插件，建议使用rollup，开发组件的话建议使用webpack。

---

言归正传，上面说循环打包，这个循环的数据来源于build()方法的参数，let builds = require('./config').getAllBuilds()。
根据以上代码找到同级目录下的 config.js 文件，代码如下。

主要代码 exports.getAllBuilds = () => Object.keys(builds).map(genConfig)，这个代码的作用就是根据 builds 数据，组织要打包的配置项数组, 返回给 rollup 进行打包。

---

builds数据

重点在最后一个配置项 web-runtime-prod

文章一开始，我们找到了 vue 的入口文件 dist/vue.runtime.min.js，再通过找到这个配置项，我们就知道了编译入口文件的源码文件就是 entry-runtime.js ，距离我们 从哪儿看源码的问题 只有一步距离，只要找到 entry-runtime.js 就行。

---

我们再分析一下 resolve 方法

这个方法，主要作用就是拼接路径。

具体方法是：通过正则表达式，把传入的地址参数截取两段，比如：web/entry-runtime.js 截取后就是 base = ['web', 'entry-runtime.js']。

再通过别名文件 require('./alias') 找到 web对应的真实路径。

最后的源码文件地址就是 src/platforms/web/entry-runtime.js

总结

以上说了那么多，主要就是先确定vue的编译后的文件，再根据执行脚本文件，顺藤摸瓜找到vue的源码。