Vite

Vite 8 beta（Rolldown搭載）に基づいています。Vite 8はRolldownバンドラーとOxcトランスフォーマーを使用しています。

Viteは、高速な開発サーバー（ネイティブESM + HMR）と最適化された本番ビルドを備えた、次世代のフロントエンドビルドツールです。

設定方針

• TypeScriptを使用：vite.config.tsを推奨
• 常にESMを使用し、CommonJSは避ける

コア

トピック	説明	リファレンス
設定	vite.config.ts、defineConfig、条件付き設定、loadEnv	core-config
機能	import.meta.glob、アセットクエリ（?raw、?url）、import.meta.env、HMR API	core-features
Plugin API	Vite固有のフック、仮想モジュール、プラグイン順序	core-plugin-api

ビルド & SSR

トピック	説明	リファレンス
ビルド & SSR	ライブラリモード、SSRミドルウェアモード、ssrLoadModule、JavaScript API	build-and-ssr

応用

トピック	説明	リファレンス
Environment API	Vite 6以降のマルチ環境サポート、カスタムランタイム	environment-api
Rolldown移行	Vite 8の変更：Rolldownバンドラー、Oxcトランスフォーマー、設定移行	rolldown-migration

クイックリファレンス

CLIコマンド

vite              # Start dev server
vite build        # Production build
vite preview      # Preview production build
vite build --ssr  # SSR build

よくある設定

import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [],
  resolve: { alias: { '@': '/src' } },
  server: { port: 3000, proxy: { '/api': 'http://localhost:8080' } },
  build: { target: 'esnext', outDir: 'dist' },
})

公式プラグイン

• @vitejs/plugin-vue - Vue 3 SFCサポート
• @vitejs/plugin-vue-jsx - Vue 3 JSX
• @vitejs/plugin-react - ReactとOxc/Babel
• @vitejs/plugin-react-swc - ReactとSWC
• @vitejs/plugin-legacy - レガシーブラウザサポート

スキル間リファレンス

• テスト → vitestスキルを使用（Vite ネイティブテスト）
• Vueプロジェクト → コンポーネントパターンについてはvueスキルを使用
• ライブラリのバンドリング → TypeScriptライブラリについてはtsdownスキルを使用