目錄結(jié)構(gòu)
image.png
Vue的不同構(gòu)建版本
- 通過
npm run build打包出所有版本的文件 - 通過
dist/READMe.md重虑，可以獲取到不同版本的解釋
| UMD | CommonJS | ES Module | |
|---|---|---|---|
| Full | vue.js | vue.common.js | vue.esm.js |
| Runtime-only | vue.runtime.js | vue.runtime.common.js | vue.runtime.esm.js |
| Full (production) | vue.min.js | ||
| Runtime-only (production) | vue.runtime.min.js |
術(shù)語解釋
- 完整版：同時(shí)包含編譯器和運(yùn)行時(shí)的版本。
-
編譯器：用來將模板字符串編譯成為
JavaScript渲染函數(shù)的代碼秧荆，體積大，效率低 -
運(yùn)行時(shí)：用來創(chuàng)建
Vue實(shí)例，渲染并處理虛擬DOM等的代碼帖鸦，體積小易遣，效率高〈昊希基本上就是除去編譯器的代碼杆故。 -
UMD：UMD 版本通用的模塊版本，支持多種模塊方式溉愁，包括直接掛載到
window上处铛。vue.js默認(rèn)文件就是運(yùn)行時(shí) + 編譯器的 UMD 版本。 - CommonJS：CommonJS版本用來配合老的打包工具比如Browserify或webpack 1拐揭。
-
ES Module：從2.6開始 Vue 會(huì)提供兩個(gè) ESM 構(gòu)建文件撤蟆，為現(xiàn)代打包工具提供的版本。
- ESM 格式被設(shè)計(jì)為可以被靜態(tài)分析堂污，所以打包工具可以利用這一點(diǎn)來進(jìn)行
tree shaking家肯，并將用不到的代碼排除出最終的包。
- ESM 格式被設(shè)計(jì)為可以被靜態(tài)分析堂污，所以打包工具可以利用這一點(diǎn)來進(jìn)行
尋找入口文件
-
在package.json中盟猖，找到打包的配置文件
image.png -
打開
scripts/config.js,找到文件導(dǎo)出的地方
image.png -
進(jìn)入
genConfig()函數(shù)（按住command+鼠標(biāo)左鍵）
image.png
先看genConfig()函數(shù)的第一行讨衣，根據(jù)傳入的參數(shù)獲取對(duì)應(yīng)的選項(xiàng)，在npm run dev時(shí)式镐，我們傳入了TARGET:web-full-dev
-
進(jìn)入
builds反镇，找到web-full-dev
image.png -
進(jìn)入
resolve()函數(shù)
image.png
獲取到base的值：web，在aliases中找到對(duì)應(yīng)的值
image.png
這樣最后拼接出entry的地址：
src/platforms/web/entry-runtime-with-compiler.js
找到打包的入口文件娘汞！
解決一個(gè)問題
初始化時(shí)同時(shí)傳入template和render歹茶，頁面上會(huì)輸出什么？
const vm = new Vue({
el: '#app',
tempalte: '<h3>Hello Template</h3>',
render (h) {
return h('h4', 'Hello Render!')
}
})
進(jìn)去入口文件src/platforms/web/entry-runtime-with-compiler.js，找到$mount方法
image.png
- 通過查看會(huì)發(fā)現(xiàn)辆亏，如果傳入了
render风秤，就會(huì)使用傳入的render，否則使用template - 那么
$mount是什么時(shí)候被調(diào)用的呢扮叨？打開瀏覽器的sources,給$mount方法加上斷點(diǎn)缤弦，通過右側(cè)的Call Stack可以查看到$mount的調(diào)用過程：在初始化Vue實(shí)例時(shí)，調(diào)用的init彻磁，在init中調(diào)用了$mount
image.png
一些其它的
- 下載vue源碼后碍沐，給dev命令添加
--sourceMap,方便調(diào)試 - 收起所有代碼，
command + k, 展開：command + 0
