本期內容小編將給大家?guī)恚?/p>

• 分析啟動腳本
• 查找入口文件

看看首次編譯過程，從源碼層面解析初始化細節(jié)

在我們開始這期內容之前，小編先帶領大家回顧一下上期的知識點。

還是從這張圖開始，在上期內容中我們談到，Vue3.0的源碼中最為核心的包就是叫做以 vue命名的文件包，在這個包內有三個依賴關系，其中 runtime-dom 和 compiler-dom 是明顯的依賴關系，但其中還有一個隱性的依賴叫做reactivity 的依賴，這里面主要是做響應式的一些處理，后期小編會帶領大家著重探討這個依賴包的原理，而其實真正的依賴在 runtime-core 這個包里，這個包才是真正告訴你createApp 是怎么由來的，內部又做了哪些事情。

小編這里梳理了一下邏輯關系圖，createApp 這個方法最終在 createAppAPI 內部有一個工廠函數在這里得到了一次擴展 createApp 的方法，擴展此方法最為重要的一點就是為了讓這個函數變得更加通用，我們知道在 createApp 里面?zhèn)魅胍粋€ render 函數，但是對于 createApp 來說它只管調用傳入進來的參數，而并不關心你這個參數做了哪些的邏輯處理，真正我們能夠使用實例上的方法就是來源這個 createAPI 擴展之后得到的屬性，例如 component mixin use。

正文經過之前的內容回顧，想必大家對 createApp已經有了深刻的了解，接下來將進入到本章內容的核心部分，首先帶領大家分析啟動腳本，看看啟動腳本都做了哪些事情。

"dev": "node scripts/dev.js --sourcemap",

這行代碼想必大家應該都不陌生吧，這就是我們啟動項目的運行腳本我們就要從 dev.js 這個腳本文件開始下手。

WeChat46b3d93f7c154ae5e1b95022c46eb57b.png

minimist 是專門用來解析傳進來的參數，什么意思呢?當我們在運行 npm run dev 這行命令的時候實際上是運行 node scripts/dev.js 當后面的路徑傳入 -- 或者 - 的時候會被解析成為第一個參數，否則會打包成 vue 的包。

WeChat96a3eefa625cef34b030b68fe2353724.png

在這張圖中也能看出 dev-sfc 部分使用的打包格式為 esModule 格式，在瀏覽器中則會以type=module 出現。那么我么現在知道指令映射的代碼中的含義了，那么問題來了下一步我們該干什么呢?哈哈哈～ 如果對工程化的框架比較了解的話，我們就要看看打包工具的配置文件，看看打包過后你的 entry 入口文件和你的export 打包后輸出文件是怎樣配置的，在源碼中使用的是 rollup 打包生成的，所以我們要瀏覽一下 rollup.config.js 這個配置文件。

WeChatc8eb0ccf03ff5fb6b79d0ed338c01de1.png

在配置系文件中我們就可以看到，所有獲取包目錄都是從 packages 中得來的，通過process.env.TARGET 進行包名的路徑拼接，就會得到 /packages/xxx

WeChat024e26087aec3918dc0ecf425d3c7580.png

這里就是要配置的一些打包選項，例如CommonJs ECMAScript 格式，這里講一下 iife格式，就是打包后生成一個匿名函數自調的格式，(()=>{})()

WeChat465926fb4d72cd8107ca6bf763ffba32.png

這里我們看到真正打包的是以 runtime 開頭的包名稱，這時候他會根據你的指令中是否包含 -f runtime-xxx 這種格式的映射，生成兩種第一個是運行時打包，沒有在初始化的時候把編譯器打包進去，第二個則是全量打包。

WeChatee256bb4095f1e2a86c2e2321b505971.png

所以，我們就找到了在 packages/vue/index.ts這個路徑下的包，在這個包里面有一個叫做compileToFunction 編譯函數其真正的作用就是一個是解析 template 中的 innerHhtml，另一個就是生成一個 render 渲染函數，另外，在這個函數中他會判斷你傳進來的參數是不是以字符串形式的模板另外一個是不是 dom，就是說支持的寫法 mount("< div>xxx") mount('#app') 或者 mount(app)。

WeChat98c822fa89560f875415a68ff6276a83.png

這里在 callStack 中就真正的解析了compileToFunction 是如何一步一步的變成渲染函數。

WeChat00a9bbcb59649cbbf8b1ce99b6c81d43.png

WechatIMG81.jpeg

從這個上面我們就看出，template 真正就是傳入的 innterHtml。

WeChat70bfdad15d56582ac1f31f3ea6ccab68.png

通過瀏覽器調試后我們就得出compileToFunction 是在 finishComponentSetup這個函數中調用的，而 template 就是要解析的innerHTML。

WeChat5f3653a52a450b5ece0d35a757cabe17.png

vue包中使用 registerRuntimeCompiler 將 compileToFunction 這個函數注冊，這是為了初始化需要編譯時能夠調用它。這里原封不動導出 runtime-dom，因此有了vue -> runtime-dom -> runtime-core這樣的依賴關系。

WeChat581967ab4ceb37c6fefa2ed599d85bad.png

WeChat802ba115543725ce52877e96d64aa870.png

隨后的流程就是：

createRenderer() => baseCreateRenderer() =>

createAppAPI(render, hydrate) => createApp()

app.mount() => render() => patch(n1, n2) =>

processComponent() => mountComponent()

這里我們主要研究一下 mountComponent() 掛載組件做了哪些事情。

WechatIMG82.jpeg

WeChat280ea252a066a6ad52f94d5f261b9ba3.png

在這個函數內主要有兩個函數調用，一個是createComponentInstance 創(chuàng)建組件實例，另一個是 setupComponent 初始化組件實例，從這個函數開始找尋。

WechatIMG86.jpeg

WechatIMG87.jpeg

在這里我們就看到組件初始化接收的就是一個setup 這塊對傳入不同方法做了各種處理，例如promise隨后會在 handleSetupResult() 這個方法內處理 setup 的返回值。

WechatIMG88.jpeg

根據 setup 返回不同的類型作出處理，比如 返回的是一個函數，對象或者字符串之類的。

WechatIMG89.jpeg

執(zhí)行完畢后都會走 finishComponentSetup() 這個方法。

WeChatde62b32d0810ec4d669cb295a41fd91a.png

WeChat3cc852f1a9e27e9a71503075b277a1c8.png

所以在這個函數內真正的是 返回一個 render 函數，并且兼容 Vue2.0 的方法。

到這里，基本上初始化所有的邏輯就理順啦～

總結

這期內容小編就告訴大家從代碼的層面一步步的深入了解初始化過程，首先是從 package.json目錄文件中鎖定執(zhí)行的哪個腳本文件，我們通常使用的打包工具如：webpack vite 或者 rollup之類的都會有一個配置文件 xxx.config.js 從這個文件中我們就能鎖定 entry 的入口文件，通過確定入口文件之后我們就能找到各個包之間的依賴關系，根據依賴包，一步步深挖理解初始化的整體流程。

順便說一句 Vue3.0 在2022年2月7日將正式成為默認版本，屆時我們安裝的 vue 將會是3.x這個版本，屬于Vue3的時代將正式開啟!