Press "Enter" to skip to content

Vue2.5.16源码解读一:确定阅读入口

准备粗略地阅读下Vue,跟网上别人家的源码解读文章不同的是,这个系列是完全以第一次去读代码的视角带大家一起去读的,而非看完源码后以上帝的总结视角来写的系列文章。

要看我们就直接找比较新的版本看,fork vue代码到我们自己的仓库上,clone到本地后,执行 git tag 发现最新的版本是2.5.16,所以在本地新开一个tag-v2.5.16分支方便阅读以及后续commit(如果要commit的话):

执行完,我们的本地项目就已经切换到新的 tag-v2.5.16 分支上了。

拿到一个项目,我们首先看一下 package.json 文件里的 scripts 字段:

mmp,但是英雄无所畏惧,因为我打算只看 build 命令,所以我们的入口文件就是 scripts/build.js 这个文件了。

接下来我们采用调试代码的方式进行阅读。我用的是webstorm这个IDE,先点右上角edit configuration,然后按下图进行配置:

保存后再点右上角的甲壳虫进行debug。

scripts/build.js 文件开头部分内容如下:

我们就将断点打到 if (!fs.existsSync('dist')) { 这一行,然后开始往下一点点走(step over)。

下面就单独对这个文件添加一些注释方便读者阅读:

 

好了,大概的打包流程是这样的,anyway我们是要读源码,所以我们的关注点应该是这里打包时对应的入口文件,从那个文件开始着手阅读代码。

根据 let builds = require('./config').getAllBuilds() 这行代码,我们跳转到 config.js 文件,发现:

因为我们如果直接通过在html里用script标签引用vue.js进行开发的时候,一般都是引用vue.js的,所以这里我们就看这个 web-full-dev 就可以了(它的 dest 字段对应的是 vue.js 文件)。然后我们通过 entry 字段判断我们要看的入口文件为: src/platforms/web/entry-runtime-with-compiler.js 这个文件。