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>'
     })