vite

Vite

Vite 8 ベータ版（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
プラグイン API	Vite 固有のフック、仮想モジュール、プラグインの順序	core-plugin-api

ビルドと SSR

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

高度な機能

トピック	説明	リファレンス
環境 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 - Oxc/Babel を使用した React
• @vitejs/plugin-react-swc - SWC を使用した React
• @vitejs/plugin-legacy - レガシーブラウザーのサポート