mcpField
V
vite

vite

github.com/marcioaltoe開発057 回インストール今日更新
リポジトリ

vite について

Vite の設定、プラグイン、ビルド、SSR を扱う開発スキルです。フロントエンド開発者向けに、一般的なワークフローと Vite 8 の移行情報をまとめています。

主な機能

  1. 01TypeScript と ESM の設定
  2. 02開発サーバーと HMR
  3. 03Vite プラグイン API
  4. 04本番ビルドと SSR
  5. 05Environment API の解説
  6. 06Rolldown 移行の説明

活用シーン

  1. 01Vite プロジェクトのセットアップ
  2. 02Vite プラグインの設定
  3. 03SSR アプリケーションのビルド
  4. 04設定の Vite 8 への移行

インストール

コマンドをコピーしてターミナルで実行します。

$npx skills add https://github.com/marcioaltoe/skills --skill vite

インストール後、Claude Code で/viteを入力して読み込まれたか確認します。

同梱ファイル

SKILL.md と一緒にインストールされる参考資料やスクリプト。

GENERATION.md
references/
build-and-ssr.md
core-config.md
core-features.md
core-plugin-api.md
environment-api.md
rolldown-migration.md

詳細

Vite

Vite v8.3.1（Rolldown を採用）に基づいています。2026-09-25 に生成されました。Vite 8 では、esbuild + Rollup の代わりに Rolldown バンドラーと Oxc トランスフォーマーを使用します。

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

設定の優先事項

  • TypeScript を使用します。vite.config.ts を優先してください
  • 常に ESM を使用し、CommonJS は避けてください

コア機能

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

ビルドと SSR

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

高度な機能

トピック説明リファレンス
環境 APIVite 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 - レガシーブラウザーのサポート

コメント

Markdown 対応