vue源码学习——源码构建

Rollup

vue.js源码是基于Rollup构建的

Rollup 和 Webpack

rollup和webpack都是构建工具，但是webapck更强大一些，会将图片，字体等静态资源编译成JavaScript，但是rollup更适合JavaScript库的编译，只处理js的部分，其他资源部分是不会管的。

vue.js 源码构建相关的配置在scripts目录下

构建过程

scripts/build.js

构建的入口文件：这个文件的代码是先从配置文件读取配置，再通过命令行参数对构建配置进行过滤，这样可以构建出不同的用途的vue.js（用在web端端vue.js，运行在weex端的vue.js等等不同的版本）。

scripts/config.js

这个文件是有关vue.js 构建的配置

Runtime Only 版本和 Runtime+compiler版本比较

1. Runtime Only版的vue.js运行时，需要借助webpack的vue-loader工具把.vue文件编译成JavaScript，因为这是在编译阶段做的，所以它只包含运行时的vue.js代码，因此代码体积比较轻量

2. Runtime + Compiler，我们如果没有对代码做编译，但是又使用了Vue的template属性并传入一个字符串，需要在客户端编译模版

// 需要编译器的版本
new Vue({
  template: '<div>{{ hi }}</div>'
})

// 这种情况不需要
new Vue({
  render (h) {
    return h('div', this.hi)
  }
})

因为在 Vue.js 2.0 中，最终渲染都是通过 render 函数，如果写 template 属性，则需要编译成 render 函数，那么这个编译过程会发生运行时，所以需要带有编译器的版本。

很显然，这个编译过程对性能会有一定损耗，所以通常我们更推荐使用 Runtime-Only 的 Vue.js。