在了解源码如何构建之前，我们有必要了解下 项目中一个简单的目录结构如下：
如上只是一个非常简单的一个目录，为了节约篇幅，只是把入口构建的相关的目录画出来。
我们看任何库相关的代码的第一步先把视线转移到 package.json 中来。然后看下 “scripts” 这个，如下：
这边我们只要关注 “dev”: “rollup -w -c scripts/config.js –environment TARGET:web-full-dev –sourcemap”, 这块就可以了，其他的命令也是类似的。如上使用的 rollup 进行打包，然后我们会看到命令中有 scripts/config.js 这个配置文件，因此我们需要把视线找到 这个 scripts/config.js 这个文件上来。
scripts/config.js 代码如下:
然后把视线移到最后的代码，if条件判断 process.env.TARGET 是否存在，存在的话，就执行 getConfig(process.env.TARGET) 这个函数，最后把结果导出 module.exports = genConfig(process.env.TARGET); 从命令行中，我们可以看到 process.env.TARGET 值为：’web-full-dev’; 因此 const opts = builds[‘web-full-dev’]; 因此最后 opts的值变为如下：
再看看 resolve 函数如下：
如上 resolve 函数，首先会获取基路径，比如 ‘web/entry-runtime-with-compiler.js’ 的基路径就是 ‘web’,因此 base = ‘web’; 然后判断 if (aliases[base]) {} aliases 是否有 key为web的，如果有的话，直接返回：return path.resolve(aliases[base], “entry-runtime-with-compiler.js”); 同理其他的也一样。
我们再结合下面的 alias.js 代码
alias.js 代码如下：
由代码可知：alias.js 代码可以理解为如下：
分析可知最后的opts对象变为如下：
因此 genConfig 函数内的config对象值变为如下：
如上代码打包的含义可以理解为如下：
找到 ‘项目的根目录’ + ‘/src/platforms/web/entry-runtime-with-compiler.js’, 路径下的js文件 打包到’项目的根目录’ + ‘/dist/vue.js’,目录下的 vue.js 文件。因此我们需要把视线转移到 ‘/src/platforms/web/entry-runtime-with-compiler.js’ 文件内了。该文件就是我们的vue的入口文件。
entry-runtime-with-compiler.js 基本的代码如下：
如上其他的代码，我们这边先不管，我们先看的 import Vue from ‘./runtime/index’ 这句代码，为什么要看这句代码呢，那是因为 它引入了该文件，并且直接使用 export default Vue; 导出该 Vue.因此我们会找到 src/platforms/web/runtime/index.js 代码如下：
该文件的代码也是一样，先引入 import Vue from ‘core/index’ 文件后，然后导出 export default Vue;
因此我们继续找到 src/core/index.js 代码如下：
如上代码，我们主要看 import Vue from ‘./instance/index’; 和一些全局API import { initGlobalAPI } from ‘./global-api/index’ 的代码。
首先我们看 src/core/instance/index.js 代码如下：
如上代码，我们终于看到Vue的构造函数了，我们在Vue页面初始化 new Vue({}); 这样调用的时候，就会调用该构造函数，而我们传入的参数就传给了options。该函数首先会判断是不是正式环境 及 是否使用 new 来实列Vue。
最后会调用 this._init(options) 该函数。该函数在 src/core/instance/init.js 里面，也就是我们下面的initMixin(Vue) 函数调用初始化了。它会把一些方法挂载到Vue的原型上，比如 _init()方法，如下代码：
Vue.prototype._init = function() {} 这样的。
下面我们继续来看下该方法，在 src/core/instance/init.js 代码如下：
如上就是 init.js 代码。
initGlobalAPI
下面我们再看下 src/core/global-api/index.js, Vue在初始化过程中，不仅给他的原型prototype上扩展方法，还会给Vue这个对象本身扩展很多全局的静态方法。那么扩展的全局的静态方法和属性就是在该函数内做的。在 src/core/global-api 其实有如下js文件
src/core/global-api/index.js 源码可以去看vue(v2.6.10)上去看了。在后面我们会逐渐讲解挂载了哪些全局属性和原型方法的。
Original: https://www.cnblogs.com/tugenhua0707/p/11756578.html
Author: 龙恩0707
Title: Vue系列—源码构建过程(四)
原创文章受到原创版权保护。转载请注明出处：https://www.johngo689.com/553780/
转载文章受原作者版权保护。转载请注明原作者出处！