ComeOnOliver/skillshub

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

高度なトピック

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

クイックリファレンス

CLIコマンド

vite              # 開発サーバーを起動
vite build        # プロダクションビルド
vite preview      # プロダクションビルドをプレビュー
vite build --ssr  # SSRビルド

一般的な設定

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 - レガシーブラウザサポート