はじめる
概要
Vite (French word for "quick", pronounced /vit/, like "veet") is a build tool that aims to provide a faster and leaner development experience for modern web projects. It consists of two major parts:
たとえば、非常に高速なホットモジュール交換（HMR）など、ネイティブESモジュールよりもリッチな機能拡張機能を提供する開発サーバー。
ロールアップでコードをバンドルするビルドコマンド。
Viteは意見があり、箱から出して賢明なデフォルトが付属しています。機能ガイドで何が可能かについて読んでください。フレームワークのサポートまたは他のツールとの統合は、プラグインを介して可能です。構成セクションでは、必要に応じてViteをプロジェクトに適応させる方法について説明します。
Viteは、完全なタイピングサポートを備えたプラグインAPIおよびJavaScript APIを介して非常に拡張可能です。
Why Viteセクションのプロジェクトの背後にある根拠について詳しく知ることができます。
ブラウザのサポート
開発中、Viteはesnext変換ターゲットとして設定します。これは、最新のブラウザーが使用されており、最新のJavaScriptおよびCSS機能をすべてサポートすると仮定しているためです。これにより、構文の低下が防止され、Viteがモジュールを元のソースコードにできるだけ近いことを提供します。
生産ビルドのために、デフォルトでは、ネイティブESモジュール、ネイティブESMダイナミックインポート、 import.meta 、 Nullish Coulescing 、 Bigintなど、最新のJavaScriptをサポートするVite Targetsブラウザー。レガシーブラウザは、 @Vitejs/Plugin-Legacyを介してサポートできます。詳細については、生産セクションの建物をご覧ください。
オンラインでviteを試してみます
StackblitzでオンラインでViteを試すことができます。ブラウザでViteベースのビルドセットアップを直接実行するため、ローカルセットアップとほぼ同じですが、マシンに何かをインストールする必要はありません。 vite.new/{template}に移動して、使用するフレームワークを選択できます。
サポートされているテンプレートプリセットは次のとおりです。
| JavaScript | タイプスクリプト |
|---|---|
| バニラ | バニラ-ts |
| vue | vue-ts |
| 反応します | React-ts |
| プアクト | PREACT-TS |
| 点灯 | lit-ts |
| svelte | svelte-ts |
| 固体 | 固体 |
| qwik | qwik-ts |
最初のViteプロジェクトの足場
Compatibility Note
Viteにはnode.jsバージョン18+または20+が必要です。ただし、一部のテンプレートでは、より高いnode.jsバージョンが機能する必要があります。パッケージマネージャーが警告している場合はアップグレードしてください。
$ npm create vite@latest$ yarn create vite$ pnpm create vite$ bun create vite次に、プロンプトに従ってください！
また、追加のコマンドラインオプションを介して使用するプロジェクト名とテンプレートを直接指定することもできます。たとえば、Vite + Vueプロジェクトを足場にするには、実行してください。
# NPM 7+、追加のダブルダッシュが必要です:
$ 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サポートされてreact-ts各reactの詳細react-swc-tsはlit-ts Create-Vite qwik preact-ts vanilla lit vue react-swc vue-ts vanilla-ts 、 svelte 、 svelte-ts 、 solid 、 solid-ts 、 qwik-ts preact
プロジェクト名に.使用して、現在のディレクトリの足場になります。
コミュニティテンプレート
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#メインマイプロジェクト
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およびプロジェクトルート
気づいたかもしれないことの1つは、Viteプロジェクトでは、 index.html public内に押し出されるのではなく、最前線と中心部であるということです。これは意図的です。開発中はViteはサーバーであり、 index.htmlアプリケーションへのエントリポイントです。
静的HTTPサーバーと同様に、Viteにはファイルが提供される「ルートディレクトリ」の概念があります。残りのドキュメント全体で<root>と呼ばれることがわかります。ソースコードの絶対URLは、プロジェクトルートをベースとして使用して解決されるため、通常の静的ファイルサーバーを使用しているかのようにコードを記述できます（より強力です！）。 Viteは、ルート外のファイルシステムの場所に解決する依存関係を処理することもできます。これにより、モノレポベースのセットアップでも使用可能になります。
Viteは、複数の.htmlエントリポイントを持つマルチページアプリもサポートしています。
代替ルートの指定
vite実行すると、現在の作業ディレクトリをルートとして使用してDEVサーバーを起動します。 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実行してください。
コマンドラインインターフェイスの詳細をご覧ください
未発表のコミットを使用します
最新の機能をテストするための新しいリリースが待ちきれない場合は、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@SHASHA ViteのCommit Shasのいずれかに置き換えます。古いコミットリリースがパージされているため、先月内にのみコミットが機能することに注意してください。
または、 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リンクしていたパッケージマネージャー）を実行します。開発サーバーを再起動して、出血エッジに乗ってください！
Dependencies using Vite
依存関係によって使用されるViteバージョンを交換して置き換えるには、 NPMオーバーライドまたはPNPMオーバーライドを使用する必要があります。