はじめに
概要
Vite（フランス語で「速い」を意味し、/vit/と発音、"veet" のような音）は、モダンな Web プロジェクトの開発体験をより速く、より効率的にすることを目的としたビルドツールです。主に次の2つの部分で構成されています。
豊富な機能拡張をネイティブ ES モジュールの上に提供する開発サーバー。例えば、非常に高速なホットモジュールリプレースメント (HMR)などがあります。
Rollupでコードをバンドルし、本番環境向けに高度に最適化された静的アセットを出力するように事前設定されたビルドコマンド。
Vite は、独自の意見を持ち、すぐに使用できる適切なデフォルト設定が付属しています。可能なことについては、機能ガイドを参照してください。フレームワークのサポートや他のツールとの統合は、プラグインを通じて可能です。設定セクションでは、必要に応じて Vite をプロジェクトに適合させる方法について説明しています。
Vite は、プラグイン API と JavaScript API を介して、完全な型サポートとともに高度に拡張可能です。
プロジェクトの背後にある理論的根拠の詳細については、Vite を選ぶ理由セクションを参照してください。
ブラウザのサポート
開発中、Vite は esnext を変換ターゲットとして設定します。これは、最新の JavaScript および CSS の機能をすべてサポートするモダンブラウザが使用されていることを想定しているためです。これにより、構文の低減を防ぎ、Vite がモジュールをできるだけ元のソースコードに近い形で提供できるようにします。
本番環境のビルドでは、デフォルトで Vite は ネイティブ ES モジュール、ネイティブ ESM ダイナミックインポート、およびimport.metaをサポートするブラウザを対象としています。レガシーブラウザは、公式の @vitejs/plugin-legacy を使用してサポートできます。詳細については、本番環境向けビルドセクションを参照してください。
オンラインで Vite を試す
StackBlitzでオンラインで Vite を試すことができます。これは、Vite ベースのビルド設定をブラウザで直接実行するため、ローカル設定とほぼ同じですが、マシンに何もインストールする必要はありません。vite.new/{template} に移動して、使用するフレームワークを選択できます。
サポートされているテンプレートプリセットは次のとおりです。
| JavaScript | TypeScript |
|---|---|
| vanilla | vanilla-ts |
| vue | vue-ts |
| react | react-ts |
| preact | preact-ts |
| lit | lit-ts |
| svelte | svelte-ts |
| solid | solid-ts |
| qwik | qwik-ts |
最初の Vite プロジェクトの足場を組む
互換性に関する注記
Vite には Node.js バージョン 18 以上または 20 以上が必要です。ただし、一部のテンプレートでは動作するためにさらに高い Node.js バージョンが必要になる場合があります。パッケージマネージャーが警告する場合はアップグレードしてください。
$ npm create vite@latest$ yarn create vite$ pnpm create vite$ bun create vite次に、プロンプトに従ってください。
プロジェクト名と使用するテンプレートを、追加のコマンドラインオプションで直接指定することもできます。たとえば、Vite + Vue プロジェクトの足場を組むには、次を実行します。
# npm 7+, extra double-dash is needed:
$ 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サポートされている各テンプレートの詳細については、create-vite を参照してください: vanilla, vanilla-ts, vue, vue-ts, react, react-ts, react-swc, react-swc-ts, preact, preact-ts, lit, lit-ts, svelte, svelte-ts, solid, solid-ts, qwik, qwik-ts。
現在のディレクトリに足場を組むには、プロジェクト名に . を使用できます。
コミュニティテンプレート
create-vite は、人気のあるフレームワークの基本的なテンプレートからプロジェクトをすばやく開始するためのツールです。他のツールや異なるフレームワークを対象とする、コミュニティがメンテナンスしているテンプレートについては、Awesome Vite を確認してください。
https://github.com/user/project のテンプレートの場合、https://github.stackblitz.com/user/project（プロジェクトの URL の github の後に .stackblitz を追加）を使用してオンラインで試すことができます。
degitのようなツールを使用して、テンプレートの1つでプロジェクトの足場を組むこともできます。プロジェクトが 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次のような index.html ファイルを作成します。
<p>Hello Vite!</p>次に、ターミナルで適切な CLI コマンドを実行します。
$ npx vite$ yarn vite$ pnpm vite$ bunx viteindex.html は http://localhost:5173 で提供されます。
index.html とプロジェクトルート
Vite プロジェクトで気づいたかもしれないことの 1 つは、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", // start dev server, aliases: `vite dev`, `vite serve`
"build": "vite build", // build for production
"preview": "vite preview" // locally preview production build
}
}--port や --open のような追加の CLI オプションを指定できます。CLI オプションの完全なリストについては、プロジェクトで npx vite --help を実行してください。
コマンドラインインターフェイスの詳細はこちら
未リリースのコミットの使用
最新の機能をテストするために新しいリリースを待てない場合は、ローカルマシンにvite リポジトリをクローンし、自分でビルドしてリンクする必要があります（pnpm が必要です）。
git clone https://github.com/vitejs/vite.git
cd vite
pnpm install
cd packages/vite
pnpm run build
pnpm link --global # use your preferred package manager for this step次に、Vite ベースのプロジェクトに移動し、pnpm link --global vite（または、vite をグローバルにリンクするために使用したパッケージマネージャー）を実行します。次に、開発サーバーを再起動して、最先端を体験してください！
コミュニティ
ご質問やサポートが必要な場合は、Discord および GitHub Discussions でコミュニティにお問い合わせください。