Vue源码学习1--获取源码和查找入口文件

1、下载源码

首先在Github上找到vue源码，使用git下载：

git clone https://github.com/vuejs/vue.git

安装依赖：

npm install

修改package.json的scripts里面的dev命令，添加--sourcemap，方便日后调试：

"dev": "rollup -w -c scripts/config.js --sourcemap --environment TARGET:web-full-dev"

打包，这里注意使用带编译器的版本，执行刚刚修改的脚本命令：

npm run dev

打包完成后会在dist目录下找到这两个文件：

2、查找入口文件

我们从刚才打包的文件路径，找到scripts/config.js，在config.js文件中可以发现打包配置，它保存在builds数组中：

找到带编译器且运行在浏览器的配置（注意是开发环境dev）：

找到入口文件路径entry，它通过resolve方法生成路径（Vue这里其实做了一个相当于alias插件做的事情，为了方便借助node生成了一些常用的文件夹路径保存在变量中，就和我们在vue项目中常见的@一样）。往上翻可以看到这个方法：

const aliases = require('./alias')
const resolve = p => {
  const base = p.split('/')[0]
  if (aliases[base]) {
    return path.resolve(aliases[base], p.slice(base.length + 1)) 
  } else {
    return path.resolve(__dirname, '../', p)
  }
}

这里引入了alias.js文件，找到这个文件，里面是一些路径配置：

const path = require('path')

const resolve = p => path.resolve(__dirname, '../', p)

module.exports = {
  vue: resolve('src/platforms/web/entry-runtime-with-compiler'),
  compiler: resolve('src/compiler'),
  core: resolve('src/core'),
  shared: resolve('src/shared'),
  web: resolve('src/platforms/web'),
  weex: resolve('src/platforms/weex'),
  server: resolve('src/server'),
  sfc: resolve('src/sfc')
}

通过分析这个文件，我们可以发现web这个字段对应的是src/platforms/web，通过resolve生成一个绝对路径，再结合build.js里面的resolve就可以生成最后的路径，但这里我们通过这个相对路径就可以找到。因此，直接跑到src下面的platforms中找到web目录，在web目录下找到entry-runtime-with-compiler.js文件：

这个文件导出了Vue

然而看代码发现它又导入了Vue

根据导入路径继续往下找：

然而它又导入了Vue：

再往下找，找到core目录下的index.js，注意从上文知道这个core和web一样是经过配置的：

打开它，好家伙。。。它又引入了Vue：

那就继续找：

打开它，终于发现了Vue函数声明：

我们发现这里其实就调用了一下_init方法，然而在文件中根本找不到。往下看，发现一堆函数调用：

打开initMixin发现原来在这块，通过原型添加了_init方法：

到这里我们终于找到了Vue的入口文件，可喜可贺，然而万里长征，这才是第一步。