mcpField
V
vite

vite

github.com/onmax開発7232.5k 回インストール2 日前に更新
リポジトリ

vite について

フロントエンド開発者向けの Vite スキルです。設定、開発、プロダクションビルド、プラグイン、SSRに加え、RolldownとOxcを採用したVite 8への移行も扱います。

主な機能

  1. 01Viteの設定ガイド
  2. 02開発サーバーとHMR
  3. 03プロダクションビルドとSSR
  4. 04プラグインAPIと仮想モジュール
  5. 05Rolldownへの移行ガイド

活用シーン

  1. 01TypeScriptのViteプロジェクト設定
  2. 02プロダクションビルドの作成とプレビュー
  3. 03Viteプラグインの開発
  4. 04プロジェクトのVite 8への移行

インストール

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

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

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

同梱ファイル

SKILL.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 対応