mcpField
V
vite

vite

github.com/midudev開発7.0k69 回インストール1 日前に更新
リポジトリ

vite について

vite は、Web アプリ開発者向けに Vite の設定と利用方法を案内するスキルです。開発サーバー、本番ビルド、プラグイン、サーバーサイドレンダリングを扱います。

主な機能

  1. 01TypeScript と ESM の設定ガイド
  2. 02HMR 対応の開発サーバー
  3. 03本番ビルドとプレビュー
  4. 04プラグイン API と仮想モジュール
  5. 05SSR と複数環境のガイド

活用シーン

  1. 01Vite プロジェクトの設定
  2. 02ローカル開発サーバーの起動
  3. 03本番用アセットのビルドと確認
  4. 04SSR または Vite プラグインの設定

インストール

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

$npx skills add https://github.com/midudev/autoskills --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 対応