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中，