概要
Vite で Vue.js 3 (TypeScript) の新規プロジェクトを作成した際に Vite について調べたことを記載します｡
Vite とは
"ヴィート" と発音する｡
JavaScript のビルドツール｡
従来のビルドツール (webpack や Rollup､ Parcel) より高速にビルドできる｡
従来のビルドツールは全てをビルドするが､ Vite は必要な分だけビルドする｡
webpack がデファクトスタンダードだが､次世代のビルドツールとして Turbopack と共に注目されている｡
特徴
- npm の依存関係の解決と事前バンドル
- Hot Module Replacement
- TypeScript をサポート (トランスパイルのみ)
- 様々なフレームワークをサポート
Hot Module Replacement (HMR)
HMR 機能を備えたフレームワークは､ API を活用して､ページを再読み込みしたり､アプリケーションの状態を損失することなくコードの変更を反映できる｡
この機能によって､開発の生産性が向上する｡
CLI
開発サーバー
vite
Vite 開発サーバーをカレントディレクトリで起動する｡
vite dev と vite serve は vite のエイリアス｡
つまり vite と叩いたときと同じ挙動をする｡
詳しくはこちら
ビルド
vite build
プロダクション用にビルドする｡
index.html とプロジェクトルート
Vite プロジェクトでは､ index.html は public 直下ではなく､プロジェクトルート直下にある｡
これは意図的なもので､ Vite プロジェクトは index.html をソースコードの一部として扱っており､アプリケーションのエントリーポイントとなっていることを明示するためだと思われる｡
create-vite
よく使われるフレームワークのテンプレートを元に､プロジェクトを素早く開始するためのツール｡
例えば､ vue-ts をテンプレートとして指定すると､ TypeScript の Vue.js のプロジェクトをテンプレートから生成することが出来る｡
npx create-vite <project> --template <template>
<project> を .とするとカレントディレクトリにプロジェクトを作成する｡
設定まわり
ref: Vite の設定 | Vite
コマンドラインから vite を実行すると､ Vite はプロジェクトルート無いの vite.config.js または vite.config.ts という設定ファイルを自動的に解決しようとする｡
その他
vite-env.d.ts
環境変数に型を定義するときに用いる｡