1.目录结构

src
├── compiler        # 编译相关 
├── core            # 核心代码 
├── platforms       # 不同平台的支持
├── server          # 服务端渲染
├── sfc             # .vue 文件解析
├── shared          # 共享代码
复制代码

compiler

编译器代码的存放目录，可以把template生成render函数。包括把模板解析成抽象语法树(AST)，抽象语法树(AST)生成render函数，优化vdom渲染等功能。

core

core 目录包含了 Vue.js 的核心代码，包括虚拟DOM，Vue实例化，全局API，抽象出来的通用组件，数据观测的核心代码等

platform

包含平台相关的代码，2 个目录代表 2 个主要入口，分别打包成运行在 web 上和 weex 上的 Vue.js。

sfc

把.vue 文件内容解析成一个 JavaScript 的对象。

shared

包含整个代码库通用的代码

2.源码构建过程

首先我们在package.json中，看到npm run build运行的是scripts中的build.js文件。

然后我们打开scripts中的build.js。

看到这个js中先引入依赖，然后引入了config.js中的getAllBuilds，我们再去看看config.js中的代码。

config.js文件的最后暴露了一个方法，这个方法会遍历builds拿到所有的key，然后通过map方法调用genConfig函数。那么遍历的builds对象中有什么内容呢？我只截取了一部分：

我们发现这个是打包不同版本的vue使用的编译配置。

每一个entry中都有一个resolve函数，这个resolve函数定义在了上面。

函数首先把拿到的字符串web/entry-runtime.js通过split分割，拿到web，又去aliases中获取对应的值。aliases内容如下：

aliases中，通过nodejs的方法，获取src目录下对应的文件，并把内容暴露出去。

回到config.js中的resolve方法，以web/entry-runtime.js为例

resolve方法通过path.resolve(aliases[base], p.slice(base.length + 1))返回了src/platforms/web下的entry-runtime.js文件。

再以dist/vue.runtime.common.dev.js为例

aliases中没有对应的配置，所以函数进入到path.resolve(__dirname, '../', p)的逻辑中，就是在dist中生成vue.runtime.common.dev.js。

format是打包生成文件的格式。有umd，cmd，es三种方法，对应不同打包方式导出的方式。

banner就是在对应文件上生成注释，写明打包时间、作者、版本等信息。

再看这个方法中的genConfig

genConfig方法拿到每个key对应的value值之后，重新生成了一个config配置（rollup打包的配置），返回到build.js中。

拿到配置之后，根据传入的参数（package.json中传入的变量），进行相应的过滤，然后运行build方法。

build方法执行一系列逻辑，都是生成rollup打包配置的过程，最后打包成功。

3.额外知识点

我们之前在用vue-cli脚手架时会让我们选择Runtime Only 和 Runtime + Compiler，其实他们的区别是Runtime Only会借助如 webpack 的 vue-loader 工具把 .vue 文件编译成 JavaScript，代码会更轻量；Runtime + Compiler会在客户端编译模板，这个过程会有性能损耗，而且代码体积会更大一些，所以推荐用Runtime Only。

转载于:https://juejin.im/post/5d0a180951882569f32f67bc

VUE源码笔记之准备工作