Vue源码解读前必须要知道的Vue构建流程

了解Vue的构建，可以从package.json文件开始
sprits命令内关于构建的命令如下

{
    ...    
    "build": "node scripts/build.js”,  // web版本
     // sever
    "build:ssr": "npm run build -- web-runtime-cjs,web-server-renderer”, 
    // weex
    "build:weex": "npm run build -- weex”
    …
}

从命令看出:

1. vue是通过rollup来进行构建的
   同样的构建工具webpack更强大一些，可以处理图片、 css、js等；但是rollup只做js的处理，相比之下更轻量, 所以rollup更适合js框架的打包
2. 总共有三个版本的构建
   从web版本的为起点来了解，Web版本的构建命令实际执行的是scripts/build.js
   build文件的整个核心内容是build方法

et builds = require('./config').getAllBuilds()

if (process.argv[2]) {
    const filters = process.argv[2].split(',')
    builds = builds.filter(b => {
        return filters.some(f => b.output.file.indexOf(f) > -1 ||         b._name.indexOf(f) > -1)
    })
} else {
    //. 如果没有参数就把weex给过滤掉
    builds = builds.filter(b => {
        return b.output.file.indexOf('weex') === -1
    })
}

build(builds)

得到的整个的构建流程是:

1. 读取./config 配置文件中的配置，再根据命令行中输入的参数，

   exports.getAllBuilds = () => Object.keys(builds).map(genConfig)
   // Object.keys(builds) 对象key的数组： 对应val的是不同版本的编译配置
   // genConfig 配置rollup构建的参数格式

2. 其中getAllBuilds方法返回的是一个对象数组
3. 去到这些配置中进行过滤,拿到对应的版本编译所需要的config, 传入到buildEntry方法去执行rollup编译
4. rollup在.then内执行输出的文件地址，以及代码压缩配置
5. 其中config里的format 构建格式
6. 最后config文件最后导出的是遵循rollup构建规则的所需要的数组对象

其中的别名配置暂不做分析，具体代码在scripts/alias中，

---

补充： 在我们常用的web版Vue中，又区分了两种独立构建和运行时构建

• 两者直接的使用差别

  Runtime Only 运行时构建，不包含模板编译器，借助vue-loader将.vue文件编译成js
  优点: 代码体积轻量
  缺点: 运行时需要借助vue-loader，把template模版编译成render函数
  new Vue({

   render (h) {
  
     return h('div', this.hi)
   }

  })

  Runtime+Compiler 包含模板编译器
  优点： 动态把模版编译成render函数
  缺点： 体积大，对性能有损耗

  new Vue({
       template: '<div>{{ hi }}</div>'
     })