【Phaser]既存プロジェクトにViteを導入する

メリット

• ファイルの変更が即座にブラウザに反映されます
• ビルドが自動で最適化されます

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