通過其源代碼探索VITE

Evan，您的創新構建工具，是框架 - 敏捷的，支持vue.js，react.js，svelte.js和plain javaScript。本文深入研究了表面級別的概述，探索Vite的源代碼以了解其模板和插件系統。我們將闡明模板和插件之間的區別，並檢查Vite的Core與插件之間的相互作用。 >

密鑰概念：

vite的框架獨立性源於其模板和插件體系結構，從而使項目生成各種框架。

• > Vite利用主要捆綁和Esbuild的匯總，用於模塊的兼容性和優化，從而產生了出色的速度。
• 創建一個Vite項目涉及使用
>工具選擇項目名稱和模板。 特定於框架的模板依賴於相應的插件，該插件是使用基於鉤子的體系結構構建的。
• create-vite
>使用VITE構建Vue應用

為了說明，讓我們創建一個vue項目：

（使用

>確保您始終擁有最新版本。

>此啟動

npm init vite@latest

，提示您獲取項目名稱和模板。選擇一個名稱，然後選擇“香草”或“ vue”作為模板。

> @latest

npx create-vite

create-vite

>探索vite源代碼：

> >導航到Vite的github存儲庫（github.com/vitejs/vite）並檢查

>目錄。

（已棄用）和是關鍵。 包含內置的項目模板。 您還可以找到用於內置插件的插件目錄。

>

packages>模板與插件：create-appcreate-vite create-vite

模板：新項目的入門代碼。 它們位於>內，它們提供了特定於框架的文件結構（例如，

）。

• packages/create-vite template-vue> template-vanilla插件：
啟用Vite的框架不可知論。 在

>目錄（例如，

，）中找到，它們處理特定於框架的處理。

>

• 模板經常使用插件。 例如，VUE模板需要@vitejs/plugin-vue插件來處理VUE單文件組件（SFCS）。

  比較

  >和package.json的文件template-vanilla> template-vue揭示了這種依賴性：

  

  

  template-vue包括vue，@vitejs/plugin-vue，@vue/compiler-sfc，啟用Vue支持。 @vitejs/plugin-vue>充當Vite的核心與Vue.js.

  之間的橋樑

  vue插件：

  @vitejs/plugin-vue處理Vue項目捆綁，通過鉤子委派匯總。 這些掛鉤定義了插件代碼執行的點。

  packages/plugin-vue/src/index.ts的摘要顯示掛鉤實現：

  >

  npm init vite@latest

  > vite的核心（例如，packages/vite/src/node/build.ts）使用匯總，併入這些插件。 >

  匯總與Esbuild： Vite 使用匯總（主要捆綁）和Esbuild（模塊轉換和優化 - “依賴性預捆綁”）。 Esbuild的GO速度使其非常適合這一關鍵績效任務。

  摘要：

  >此探索揭示了Vite的體系結構：管理模板；使用基於掛鉤的系統的框架特定插件通過匯總與Vite的Core集成，並通過Esbuild優化模塊處理。 這種組合提供了Vite的速度和靈活性。

  >

  create-vite常見問題（常見問題解答）：

  > （原始常見問題解答已經寫得很好，不需要更改。

以上是通過其源代碼探索VITE的詳細內容。更多資訊請關注PHP中文網其他相關文章！