目錄結(jié)構(gòu)

image.png

Vue的不同構(gòu)建版本

• 通過npm run build 打包出所有版本的文件
• 通過 dist/READMe.md，可以獲取到不同版本的解釋

術(shù)語解釋

• 完整版：同時包含編譯器和運行時的版本。
• 編譯器：用來將模板字符串編譯成為 JavaScript 渲染函數(shù)的代碼，體積大，效率低
• 運行時：用來創(chuàng)建 Vue 實例，渲染并處理虛擬 DOM 等的代碼，體積小，效率高。基本上就是除去編譯器的代碼。
• UMD：UMD 版本通用的模塊版本，支持多種模塊方式，包括直接掛載到window上。vue.js默認(rèn)文件就是運行時 + 編譯器的 UMD 版本。
• CommonJS：CommonJS版本用來配合老的打包工具比如Browserify或webpack 1。
• ES Module：從2.6開始 Vue 會提供兩個 ESM 構(gòu)建文件，為現(xiàn)代打包工具提供的版本。
  • ESM 格式被設(shè)計為可以被靜態(tài)分析，所以打包工具可以利用這一點來進行tree shaking，并將用不到的代碼排除出最終的包。

尋找入口文件

• 在package.json中，找到打包的配置文件

  
  
  image.png

• 打開scripts/config.js,找到文件導(dǎo)出的地方
  

  image.png

• 進入genConfig()函數(shù)（按住command+鼠標(biāo)左鍵）
  

  image.png

先看genConfig()函數(shù)的第一行，根據(jù)傳入的參數(shù)獲取對應(yīng)的選項，在npm run dev時，我們傳入了TARGET:web-full-dev

• 進入builds，找到web-full-dev
  

  image.png

• 進入resolve()函數(shù)
  

  image.png

獲取到base的值：web，在aliases中找到對應(yīng)的值

image.png

這樣最后拼接出entry的地址：
src/platforms/web/entry-runtime-with-compiler.js
找到打包的入口文件！

解決一個問題

初始化時同時傳入template和render，頁面上會輸出什么？

const vm = new Vue({
  el: '#app',
  tempalte: '<h3>Hello Template</h3>',
  render (h) {
    return h('h4', 'Hello Render!')
  } 
})

進去入口文件src/platforms/web/entry-runtime-with-compiler.js，找到$mount方法

image.png

• 通過查看會發(fā)現(xiàn)，如果傳入了render，就會使用傳入的render，否則使用template
• 那么$mount是什么時候被調(diào)用的呢？打開瀏覽器的sources,給$mount方法加上斷點，通過右側(cè)的Call Stack可以查看到$mount的調(diào)用過程：在初始化Vue實例時，調(diào)用的init，在init中調(diào)用了$mount
  
  image.png

一些其它的

• 下載vue源碼后，給dev命令添加 --sourceMap,方便調(diào)試
• 收起所有代碼，command + k, 展開：command + 0