Vue.js源碼是基于Rollup構(gòu)建的，它的構(gòu)建相關(guān)配置都在源碼scripts目錄下按咒。
Rollup 是一個(gè) 輕量的JavaScript 模塊打包器，以將小塊代碼編譯成大塊復(fù)雜的代碼妻献，例如 library 或應(yīng)用程序糯耍。Rollup 對(duì)代碼模塊使用新的標(biāo)準(zhǔn)化格式，這些標(biāo)準(zhǔn)都包含在 JavaScript 的 ES6 版本中喂急，而不是以前的特殊解決方案格嘁，如 CommonJS 和 AMD。ES6 模塊可以使你自由廊移、無縫地使用你最喜愛的 library 中那些 最有用獨(dú)立函數(shù)糕簿，而你的項(xiàng)目不必?cái)y帶其他未使用的代碼。ES6 模塊最終還是要由瀏覽器原生實(shí)現(xiàn)狡孔，但當(dāng)前 Rollup 可以使你提前體驗(yàn)懂诗。
構(gòu)建腳本
通常一個(gè)基于 NPM 托管的項(xiàng)目都會(huì)有一個(gè) package.json 文件逼侦，它是對(duì)項(xiàng)目的描述文件孵睬，它的內(nèi)容實(shí)際上是一個(gè)標(biāo)準(zhǔn)的 JSON 對(duì)象。
我們通常配置script字段作為NPM的執(zhí)行腳本迂猴，Vue.js 源碼構(gòu)建的腳本如下:
這里總共有 3 條命令，作用都是構(gòu)建 Vue.js离唐，后面 2 條是在第一條命令的基礎(chǔ)上隆嗅，添加一些環(huán)境參數(shù)。
當(dāng)在命令行運(yùn)行?npm run build?的時(shí)候侯繁，實(shí)際上就會(huì)執(zhí)行?node scripts/build.js，接下來我們來看看它實(shí)際是怎么構(gòu)建的泡躯。
構(gòu)建過程
主要過程入口JS在scripts/build.js里面
? ? 1. 首先會(huì)從配置文件中讀取配置贮竟，然后根據(jù)命令行參數(shù)（process.argv[2]）對(duì)配置文件做過濾，就可以構(gòu)建不同用途的Vue.js（Vue.js 是一個(gè)跨平臺(tái)的 MVVM 框架较剃，它可以跑在 web 上咕别，也可以配合 weex 跑在 native 客戶端上；所以有兩種Vue.js写穴，一種是web惰拱、一種是weex跨平臺(tái)）
? ? 2. 而配置文件在scripts/config.js的builds對(duì)象里面，遵循Rollup構(gòu)建規(guī)則啊送。
? ? ? ? entry：構(gòu)建的入口 JS 文件地址
????????dest ：表示構(gòu)建后的 JS 文件地址
????????format： 屬性表示構(gòu)建的格式偿短，cjs?表示構(gòu)建出來的文件遵循?CommonJS?規(guī)范，es?表示構(gòu)建出來的文件遵循?ES Module?規(guī)范馋没。?umd?表示構(gòu)建出來的文件遵循?UMD?規(guī)范昔逗。
? ? ? ? 其中dest涉及到resolve方法，根據(jù)scripts/alias下的別名找到找到了最終路徑篷朵。
? ? ? ? 最終在dist目錄下生成對(duì)應(yīng)打包文件勾怒。
