ソースコードを介してViteを探索します

Evan、Evan Youの革新的なビルドツールは、フレームワークに依存しており、vue.js、React.js、svelte.js、およびPlain JavaScriptをサポートしています。この記事では、表面レベルの概要を超えて、Viteのソースコードを調査して、そのテンプレートとプラグインシステムを理解しています。テンプレートとプラグインの区別を明確にし、Viteのコアがプラグインとどのように相互作用するかを調べます。

重要な概念：

Viteのフレームワークの独立性は、テンプレートとプラグインアーキテクチャに由来し、さまざまなフレームワーク全体でプロジェクトの生成を可能にします。

viteレバレッジは、モジュールの互換性と最適化のためのプライマリバンドリングとesbuildのロールアップであり、その結果、例外的な速度になります。
• Viteプロジェクトを作成するには、ツールを使用してプロジェクト名とテンプレートを選択することが含まれます。 フレームワーク固有のテンプレートは、フックベースのアーキテクチャを使用して構築された対応するプラグインに依存しています。
• Viteを使用してVueアプリを構築する：
• create-vite
説明するには、VUEプロジェクトを作成しましょう：

（を使用して、常に最新バージョンを確保します。）または、速記を使用してください。

これにより、

が起動し、プロジェクト名とテンプレートが求められます。名前を選択し、テンプレートとして「バニラ」または「Vue」のいずれかを選択します。

<code class="language-bash">npm init vite@latest</code>

@latest

<code class="language-bash">npx create-vite</code>

create-vite

viteソースコードの探索：

ViteのGithubリポジトリ（github.com/vitejs/vite）に移動し、

ディレクトリを調べます。 （非推奨）および

が重要です。

は、組み込みのプロジェクトテンプレートを収容しています。 また、内蔵プラグイン用のプラグインディレクトリもあります テンプレート対プラグイン：

packages create-appcreate-viteテンプレート：新しいプロジェクトのスターターコード。 create-vite内に位置する、フレームワーク固有のファイル構造を提供します（例：

、

）。

• プラグイン：packages/create-vite Viteのフレームワークの不可知論を有効にします。 template-vueディレクトリ（例：template-vanilla、
）で見つかり、フレームワーク固有の処理を処理します。

テンプレートは、多くの場合、プラグインを使用します。 たとえば、VUEテンプレートでは、VUEシングルファイルコンポーネント（SFCS）を処理するための@vitejs/plugin-vueプラグインが必要です。

およびpackage.jsonのファイルを比較すると、この依存関係が明らかになります：template-vanilla template-vue

は、

、template-vue、およびvueを含み、VUEサポートを有効にします。 @vitejs/plugin-vueは、ViteのコアとVue.js. @vue/compiler-sfc@vitejs/plugin-vueVUEプラグイン：

vueプロジェクトのバンドリングを処理し、フック経由でロールアップするために委任します。 これらのフックは、プラグインコードが実行されるポイントを定義します

のスニペットは、フックの実装を示しています：@vitejs/plugin-vue

Viteのコア（例えば、packages/plugin-vue/src/index.ts）は、これらのプラグインを組み込んだロールアップを使用します。

<code class="language-bash">npm init vite@latest</code>

ロールアップvs. esbuild：packages/vite/src/node/build.ts

Viteは、ロールアップ（メインバンドリング）とEsBuild（モジュール変換と最適化 - 「依存関係のバンドル」）の両方を採用しています。 Esbuildの速度は、このパフォーマンスが批判的なタスクに最適です。

概要：

この探索は、Viteのアーキテクチャを明らかにしています。

テンプレートを管理します。フックベースのシステムを使用したフレームワーク固有のプラグインは、ESBuildがモジュールの処理を最適化することで、ロールアップを介してViteのコアと統合されます。 この組み合わせは、Viteのスピードと柔軟性を提供します よくある質問（FAQ）：

create-vite

（元のFAQはすでによく書かれていて包括的です。変更は必要ありません。

以上がソースコードを介してViteを探索しますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。