通過(guò)學(xué)習(xí)項(xiàng)目是如何build的，會(huì)有利于我們更好的了解整個(gè)項(xiàng)目的代碼結(jié)構(gòu)。以便于更好的學(xué)習(xí)項(xiàng)目的各個(gè)模塊。
打開package.json，來(lái)看看項(xiàng)目構(gòu)建的script是何樣子的。
"build": "node build/build.js",
"build:ssr": "npm run build -- vue.runtime.common.js,vue-server-renderer",
"build:weex": "npm run build -- weex-vue-framework,weex-template-compiler",
從名字大概就能看出這些build腳本的用途了。我們現(xiàn)在應(yīng)該關(guān)注的就是 node build/build.js 這條命令到底干了什么？
OK，沒(méi)說(shuō)的，直接打開build/build.js文件來(lái)尋找答案。
文件內(nèi)容很簡(jiǎn)單，很容易讀懂。
- 首先就是看看有沒(méi)有dist文件夾，沒(méi)有就創(chuàng)建一個(gè)
- 在config文件中讀取所有的build任務(wù)配置信息
- 根據(jù)命令行參數(shù)對(duì)上面讀取的build任務(wù)進(jìn)行一下過(guò)濾
- 然后遍歷build任務(wù)列表，依次進(jìn)行build
那具體是如何完成一個(gè)build任務(wù)的呢？文件中的 buildEntry 和 write 兩個(gè)函數(shù)就是了。
結(jié)合上面提到的config文件，我們可以有以下理解：
- config中定義了一個(gè)builds對(duì)象，里面包含了一大堆的配置信息（entry，dest，format等）。形如：
// Runtime+compiler development build (Browser) 'web-full-dev': { entry: path.resolve(__dirname, '../src/entries/web-runtime-with-compiler.js'), dest: path.resolve(__dirname, '../dist/vue.js'), format: 'umd', env: 'development', alias: { he: './entity-decoder' }, banner },
- 通過(guò)一個(gè) getConfig 函數(shù)，我們會(huì)得到一個(gè)形如下面的配置對(duì)象
{ "entry":"/vue-master/src/entries/web-runtime-with-compiler.js", "dest":"/vue-master/dist/vue.js", "format":"umd", "banner":"/*!\n * Vue.js v2.1.8\n * (c) 2014-2017 Evan You\n * Released under the MIT License.\n */", "moduleName":"Vue", "plugins":[ { "name":"replace" }, { "name":"flow-remove-types" }, { "name":"buble" } ] }
- 有了build的配置對(duì)象，就可以將其傳遞給 buildEntry 函數(shù)來(lái)完成這個(gè)build任務(wù)了。 buildEntry 函數(shù)之中使用了 rollup 這個(gè)第三方的打包工具來(lái)對(duì)code進(jìn)行打包。
rollup是什么呢？ 馬上前往npmjs.com打探一下。
OK， 得到以下比較有用的信息：
- Next-generation ES6 module bundler ，下一代ES6 模塊打包工具
- rollup提供Javascript API 和 命令行接口
- rollup有何魔力。
- 現(xiàn)有的模塊打包工具Browserify和Webpack在require模塊時(shí)，會(huì)引入整個(gè)模塊（其中包含了大量你用不到的代碼）。
- ES6的模塊系統(tǒng)可以解決這個(gè)問(wèn)題， 使用
import { ajax } from 'utils';只引入 ajax 功能，而不引入整個(gè) utils，rollup會(huì)靜態(tài)地分析代碼和依賴，來(lái)確保最小打包。 更多詳細(xì)情況請(qǐng)參考 https://github.com/rollup/rollup
好吧，有了以上知識(shí)，我們就明白了 entries 目錄下面的文件是用來(lái)干什么的了。
它們就是打包工具的入口，rollup從它們開始分析代碼的依賴并進(jìn)行打包。
那么我們的關(guān)注點(diǎn)終于切到代碼了，以上面提到的build配置信息為例，我們下面來(lái)分析 src/entries/web-runtime-with-compiler.js 這個(gè)entry文件了。
