阅读 99

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的源码。

文章分类
前端
文章标签