Vue原始碼解讀（二） Vue原始碼構建

vue.js 原始碼是基於 rollup 構建的，它的構建相關配置都在 scripts ⽬錄下。

通常⼀個基於 npm 託管的項⽬都會有⼀個 package.json ⽂件，它是對項⽬的描述⽂件，它的內容實際上是⼀個標準的 json 物件。

我們通常會配置 script 字段作為 npm 的執⾏指令碼，vue.js 原始碼構建的指令碼如下：

這⾥總共有 3 條命令，作⽤都是構建 vue.js，後⾯ 2 條是在第⼀條命令的基礎上，新增⼀些環境引數。當在命令⾏運⾏ npm run build 的時候，實際上就會執⾏ node scripts/build.js ，接下來我們來看看它實際是怎麼構建的。

我們對於構建過程分析是基於原始碼的，先開啟構建的⼊⼝ js ⽂件，在 scripts/build.js 中：

let builds = require('./config').getallbuilds()
// filter builds via command line arg
if (process.ar**[2]) )
} else )
}build(builds)

這段**邏輯⾮常簡單，先從配置⽂件讀取配置，再通過命令⾏引數對構建配置做過濾，這樣就可以構建出不同⽤途的 vue.js 了。接下來我們看⼀下配置⽂件，在 scripts/config.js 中：

const builds = ,
// runtime+compiler commonjs build (commonjs)
'web-full-cjs': ,
banner
},// runtime only (es modules). used by bundlers that support es modules,
// e.g. rollup & webpack 2
'web-runtime-esm': ,
// runtime+compiler commonjs build (es modules)
'web-full-esm': ,
banner
},// runtime-only build (browser)
'web-runtime-dev': ,
// runtime-only production build (browser)
'web-runtime-prod': ,
// runtime+compiler development build (browser)
'web-full-dev': ,
banner
},// runtime+compiler production build (browser)
'web-full-prod': ,
banner
},// ...
}`

這⾥列舉了⼀些 vue.js 構建的配置，關於還有⼀些服務端渲染 webpack 外掛程式以及 weex 的打包配置就不列舉了。對於單個配置，它是遵循 rollup 的構建規則的。其中 entry 屬性表⽰構建的⼊⼝ js ⽂件位址，dest 屬性表⽰構建後的 js ⽂件位址。

output.format 生成包的格式，有如下格式：

1. amd -- 非同步模組定義，用於像requestjs這樣的模組載入器。

2. cjs -- commonjs, 適用於node或browserify/webpack

3. es -- 將軟體包儲存為es模組檔案。

4. iife -- 乙個自動執行的功能，適合作為標籤這樣的。

5. umd -- 通用模組定義，以amd, cjs, 和 iife 為一體。

umd模組化規範解釋

(function (global, factory) (this, function ()  else 
}

這⾥的 resolve 函式實現⾮常簡單，它先把 resolve 函式傳⼊的引數 p 通過 / 做了分割成數組，然後取陣列第⼀個元素置為 base 。在我們這個例⼦中，引數 p 是 web/entry-runtime.js ，那麼 base 則為 web 。 base 並不是實際的路徑，它的真實路徑借助了別名的配置，我們來看⼀下別名配置的**，

//在 scripts/alias 中：
const path = require('path')
module.exports =

很顯然，這⾥ web 對應的真實的路徑是 path.resolve(__dirname, '../src/platforms/web') ，這個路徑就找到了 vue.js 原始碼的 web ⽬錄。然後 resolve 函式通過path.resolve(aliases[base], p.slice(base.length + 1)) 找到了最終路徑，它就是 vue.js 原始碼web ⽬錄下的 entry-runtime.js 。因此， web-runtime-cjs 配置對應的⼊⼝⽂件就找到了。

它經過 rollup 的構建打包後，最終會在 dist ⽬錄下⽣成 vue.runtime.common.js

Vue原始碼解讀（二） Vue原始碼構建

Vue原始碼解讀

Vue高階原始碼解讀（前言）

vue原始碼閱讀（二）

Vue原始碼解讀（二） Vue原始碼構建

Vue原始碼解讀

Vue高階 原始碼解讀（前言）

vue原始碼閱讀（二）

相關推薦

Vue高階原始碼解讀（前言）