沒有網怎麼編譯vue

① vue3源碼學習--編譯階段匯總

Vue3編譯階段匯總：

• 核心包與工具：

  • vueloader：基於webpack的入口，用於處理Vue單文件組件。
  • vueLoaderPlugin：vueloader的插件，負責處理核心操作，如匹配資源並調用相應方法。
  • @vue/compilersfc：處理Vue單文件組件中的script、template和style部分。
  • compilerdom：與compilercore協同工作，專門處理template部分，將其轉換為瀏覽器可識別的JavaScript代碼。
  • compilercore：處理template的核心包，包含模板解析和轉換的核心邏輯。

• 編譯流程：

  • script部分：通過@vue/compilersfc的compileScript方法處理，將JavaScript代碼轉換為AST節點，然後進一步處理。
  • template部分：通過compilerdom和compilercore的協同工作，將模板轉換為瀏覽器可識別的JavaScript代碼。這一過程中，模板被解析為AST，再經過優化和代碼生成，最終生成render function。
  • style部分：根據其類型調用相應處理函數，如處理CSS變數和scopeId。

• 模式差異：

  • dev模式：render function會被分離出來，以支持熱模塊替換，便於開發過程中的即時更新。
  • prod模式：為了提高代碼效率，render function等代碼會被整合到setup函數中。

• 總結：

  • Vue3的編譯階段是一個清晰且有序的流程，涉及多個核心包和工具的協同工作。
  • 通過深入理解編譯流程，我們可以更好地掌握Vue源碼的工作原理，從而更有效地開發和優化Vue應用。

② 原來 vue3 文件編譯是這樣工作的！看完後更懂vue3了

理解Vue3文件編譯過程的關鍵在於熟悉vue-loader和@vitejs/plugin-vue的工作機制。以@vitejs/plugin-vue為例，讓我們通過調試來揭示這個過程。首先，Vue源代碼在App.vue文件中編寫，如設置變數msg並在template中渲染。在瀏覽器中，這些文件需要經過編譯轉換為瀏覽器能理解的js。

編譯實際發生於node環境，而不是瀏覽器端。通過調試工具如VSCode的Javascript Debug Terminal，我們可以在vite.config.ts中使用@vitejs/plugin-vue的地方設置斷點。這里，關鍵的函數是vuePlugin，它包含了buildStart和transform鉤子，分別在伺服器啟動和模塊解析時被調用。

當啟動服務，會首先調用buildStart鉤子，此時compiler變數為null，隨後通過resolveCompiler函數定位到vue/compiler-sfc庫。在transform鉤子中，我們重點關注App.vue文件的解析，這時transformMain函數會執行，它處理了template、scriptSetup（如果有setup）和styles內容。

在transformMain中，createDescriptor函數被調用，傳入App.vue的文件路徑和代碼。這個函數內部，會使用vue/compiler-sfc的parse函數，該函數接收源代碼和選項，解析出包含模板、script內容以及可能的style內容的SFCDescriptor對象。

通過這些步驟，Vue文件被逐步分解成瀏覽器可識別的組件描述符，包括了HTML模板、腳本邏輯和樣式信息。這讓你更深入地理解了Vue3文件的編譯過程，使得源代碼和瀏覽器之間的轉換過程更加清晰。