メリット
- ファイルの変更が即座にブラウザに反映されます
- ビルドが自動で最適化されます
Viteのインストール
既存のプロジェクトのルートディレクトリで、以下のコマンドを実行してViteをインストールします。
npm install vite --save-dev
Vite設定ファイルの作成
プロジェクトのルートに vite.config.js または vite.config.ts ファイルを作成します。基本的な設定は以下のようになりますが、プロジェクトに応じてカスタマイズが必要です。
// vite.config.js
import { defineConfig } from 'vite';
export default defineConfig({
// ここにViteの設定を記述
});
index.html の更新
Viteは index.html をエントリーポイントとして使用します。既存のHTMLファイルをViteが読み込めるように更新する必要があります。例えば、スクリプトタグを以下のように書き換えます。
<script type="module" src="/path/to/your/entrypoint.js"></script>
パッケージの移行
プロジェクトで使用している外部ライブラリや依存関係があれば、package.json を更新し、必要に応じて再インストールします。
開発サーバーの起動
Vite開発サーバーを起動するために、package.json のスクリプトセクションに以下を追加します。
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
}
その後、以下のコマンドで開発サーバーを起動します。
npm run dev
ビルドと本番環境のテスト
プロジェクトをビルドして、本番環境での動作をテストします。
npm run build
npm run serve