はじめに ​

概要 ​

Vite（フランス語で「素早い」という意味の単語で /vit/ ヴィートのように発音）は、現代の Web プロジェクトのために、より速く無駄のない開発体験を提供することを目的としたビルドツールです。2 つの主要な部分で構成されています:

• 非常に高速な Hot Module Replacement (HMR) など、ネイティブ ES モジュールを利用した豊富な機能拡張を提供する開発サーバー。

• Rollup でコードをバンドルするビルドコマンド。プロダクション用に高度に最適化された静的アセットを出力するように事前に設定されています。

Vite はすぐに使える実用的なデフォルトが付属しています。特徴ガイドで何ができるかをお読みください。フレームワークや他のツールとの統合はプラグインを通じて可能です。設定セクションでは、必要に応じて Vite をプロジェクトに適合させる方法について説明します。

Vite は完全な型サポートのある Plugin API と JavaScript API によって高い拡張性もあります。

プロジェクトの背景にある基本原理について、Vite を使う理由 セクションで詳しく知ることができます。

ブラウザー対応 ​

開発中、Vite はモダンブラウザーが使用され、最新の JavaScript および CSS 機能のほとんどをサポートしていることを前提としています。そのため、Vite は esnext を変換ターゲットとして設定します。これによりシンタックスの低下を防ぎ、Vite が元のソースコードにできるだけ近いモジュールを提供できるようになります。Vite は開発サーバーを動作させるためにいくつかのランタイムコードを注入します。これらのコードは、各メジャーリリース時点の Baseline Newly Available に含まれる機能を使用します (このメジャーリリースでは 2025-05-01)。

本番ビルドの場合、Vite はデフォルトで Baseline Widely Available ブラウザーをターゲットとします。これらは少なくとも 2.5 年以上前にリリースされたブラウザーです。ターゲットは設定によって下げることができます。さらに、レガシーブラウザーは公式の @vitejs/plugin-legacy を通じてサポートできます。詳細については、本番環境用のビルドセクションを参照してください。

Vite をオンラインで試す ​

StackBlitz で Vite をオンラインで試すことができます。Vite ベースのビルドセットアップをブラウザー上で直接実行するので、ローカルセットアップとほぼ同じですが、マシンに何もインストールする必要がありません。vite.new/{template} に移動して、使用するフレームワークを選択できます。

サポートされているテンプレートのプリセットは次のとおりです:

最初の Vite プロジェクトを生成する ​

$ npm create vite@latest

$ yarn create vite

$ pnpm create vite

$ bun create vite

$ deno init --npm vite

あとは画面表示に従ってください！

# npm 7+ は追加で 2 つのダッシュが必要:
$ npm create vite@latest my-vue-app -- --template vue

$ yarn create vite my-vue-app --template vue

$ pnpm create vite my-vue-app --template vue

$ bun create vite my-vue-app --template vue

$ deno init --npm vite my-vue-app --template vue

コミュニティーのテンプレート ​

create-vite はよく使われているフレームワークの基本的なテンプレートを元に、プロジェクトをすばやく開始するためのツールです。他のツールを含んでいたり、別のフレームワークを対象としている、コミュニティーが管理しているテンプレートについては Awesome Vite をチェックしてみてください。

例えば https://github.com/user/project にあるテンプレートについては、https://github.stackblitz.com/user/project（プロジェクトの URL の github の後に .stackblitz を追加）を使ってオンラインで試すことができます。

また、degit のようなツールを使って、これらのテンプレートからプロジェクトを生成することもできます。プロジェクトが GitHub 上にあり、デフォルトのブランチとして main を使用していると仮定すると、次のようにしてローカルコピーを作成できます:

npx degit user/project#main my-project
cd my-project

npm install
npm run dev

手動インストール ​

プロジェクト内に vite CLI をインストールするには、次のコマンドを使用します:

$ npm install -D vite

$ yarn add -D vite

$ pnpm add -D vite

$ bun add -D vite

$ deno add -D npm:vite

そして、次のような index.html ファイルを作成します:

<p>Hello Vite!</p>

次に、適切な CLI コマンドをターミナルで実行します:

$ npx vite

$ yarn vite

$ pnpm vite

$ bunx vite

$ deno run -A npm:vite

index.html は http://localhost:5173 で配信されます。

index.html とプロジェクトルート ​

お気づきかもしれませんが、Vite プロジェクトでは index.html は public 内に隠れているのではなく、最も目立つ場所にあります。これは意図的なものです。開発中、Vite はサーバーで、index.html はアプリケーションのエントリーポイントです。

Vite は index.html をソースコードとして、またモジュールグラフの一部として扱います。JavaScript のソースコードを参照している <script type="module" src="..."> を解決します。インラインの <script type="module"> や <link href> で参照される CSS も Vite 固有の機能を利用できます。さらに、index.html 内の URL は自動的にリベースされるため、特別な %PUBLIC_URL% プレースホルダーは必要ありません。

静的な http サーバーと同様に、Vite には、ファイルの提供元となる「ルートディレクトリー」の概念があります。ドキュメントの残りの部分では <root> として示されています。ソースコード内の絶対 URL は、プロジェクトルートをベースとして使って解決されるため、通常の静的ファイルサーバーを使用しているかのようにコードを記述できます（遥かに強力であることを除いては！）。Vite はルート外のファイルシステムの場所に解決される依存関係を処理することもできるため、モノレポベースの構成でも使用できます。

Vite は複数の .html エントリーポイントを持つマルチページアプリにも対応しています。

代替ルートの指定 ​

vite を実行すると、現在の作業ディレクトリーをルートとして使用する開発サーバーが起動します。vite serve some/sub/dir で代替ルートを指定できます。 なお、Vite は設定ファイル（vite.config.js）もプロジェクトルート内で解決するので、ルートが変更された場合は設定ファイルも移動する必要があります。

コマンドラインインターフェイス ​

Vite がインストールされているプロジェクトでは npm スクリプトで vite バイナリーを使用したり、npx vite で直接実行できます。生成された Vite プロジェクトのデフォルトの npm スクリプトは次のとおりです:

{
  "scripts": {
    "dev": "vite", // 開発サーバーを起動。エイリアス: `vite dev`, `vite serve`
    "build": "vite build", // プロダクション用にビルド
    "preview": "vite preview" // プロダクション用ビルドをローカルでプレビュー
  }
}

--port や --open のような追加の CLI オプションを指定できます。すべての CLI オプションのリストは、プロジェクト内で npx vite --help を実行してください。

コマンドラインインターフェイスについて詳しくはこちら。

未リリースのコミットの使用 ​

最新機能を試すために新しいリリースが待ちきれない場合は、https://pkg.pr.new を利用すると特定のコミットの Vite をインストールできます:

$ npm install -D https://pkg.pr.new/vite@SHA

$ yarn add -D https://pkg.pr.new/vite@SHA

$ pnpm add -D https://pkg.pr.new/vite@SHA

$ bun add -D https://pkg.pr.new/vite@SHA

SHA を任意の Vite の commit SHA に置き換えてください。古いコミットのリリースは削除されるため、利用できるのは 1 か月以内のコミットだけであることに注意してください。

代わりに、ローカルマシンに vite repo をクローンしてから自分でビルドとリンクをすることもできます（pnpm が必要）。

git clone https://github.com/vitejs/vite.git
cd vite
pnpm install
cd packages/vite
pnpm run build
pnpm link --global # このステップでは好きなパッケージマネージャーを使用

その後 Vite ベースのプロジェクトに移動し、pnpm link --global vite（または、vite をグローバルにリンクするために使用したパッケージマネージャー）を実行してください。そして開発サーバーを再起動して最先端の技術に乗っていきましょう！

コミュニティー ​

質問がある場合やサポートが必要な場合は、Discord や GitHub Discussions でコミュニティーに連絡してください。