mcpField
V
vite

vite

github.com/partme-ai開発727140 回インストール5 週間前に更新
リポジトリ

vite について

viteは、Viteを扱う開発者向けのドキュメント参照スキルです。質問に応じてガイド、設定、プラグイン情報を案内し、開発、ビルド、SSR、デプロイ、APIをカバーします。

主な機能

  1. 01ガイド項目の参照マッピング
  2. 02Vite設定資料
  3. 03プラグイン選定案内
  4. 04CLIとAPIの情報
  5. 05SSRとデプロイのトピック

活用シーン

  1. 01Vite設定のガイドを探す
  2. 02Viteプラグインを選ぶ
  3. 03HMRやJavaScript APIを扱う
  4. 04SSRやデプロイ設定を調べる

インストール

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

$npx skills add https://github.com/partme-ai/full-stack-skills --skill vite

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

同梱ファイル

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

api/
cli.md
config.md
plugin-api.md
examples/config/
build-options.md
configuring-vite.md
dep-optimization-options.md
preview-options.md
server-options.md
shared-options.md
ssr-options.md
worker-options.md
examples/guide/
api-environment-frameworks.md
api-environment-instances.md
api-environment-plugins.md
api-environment-runtimes.md
api-environment.md
api-hmr.md
api-javascript.md
api-plugin.md
assets.md
backend-integration.md
build.md
cli.md
dep-pre-bundling.md
env-and-mode.md
features.md
getting-started.md
migration.md
performance.md
philosophy.md

詳細

このスキルを使用する場面

ユーザーが次のことを求めている場合は、いつでもこのスキルを使用します。

  • 入門からパフォーマンスまで、Vite ガイドのトピックに沿って学ぶ
  • 公式の設定リファレンスを使用して Vite を設定する
  • 公式プラグインページを参考に、Vite プラグインを選択または理解する
  • Vite CLI、HMR API、または JavaScript API を使用する
  • Vite で SSR、バックエンド統合、またはデプロイのシナリオに対応する

このスキルの使用方法

  1. ユーザーのリクエストからトピックを特定します。
  2. examples/guide/ 内の該当するガイドのサンプルファイルを開きます。
  3. 設定が必要な場合は、examples/config/ 内の該当するファイルを開きます。
  4. プラグインの選択が必要な場合は、examples/plugins.md を開きます。
  5. 公式ドキュメントに忠実に従い、参照先のページと一貫性のある出力にします。
  6. 検証：npm run build を実行して、設定変更がコンパイルできることを確認します。npm run preview を実行して、本番環境向けの出力をテストします。
ガイドの対応表（https://cn.vitejs.dev/guide/ と一対一に対応）

はじめに

ガイド

API

環境 API

設定の対応表（https://cn.vitejs.dev/config/ と一対一に対応）
プラグインの対応表（https://cn.vitejs.dev/plugins/ と一対一に対応）
クイックスタート（インライン）
# Create a new Vite project
npm create vite@latest my-app -- --template react-ts

# Install and run
cd my-app && npm install
npm run dev      # Dev server with HMR
npm run build    # Production build
npm run preview  # Preview production build

// vite.config.ts
import { defineConfig } from 'vite';
import react from '@vitejs/plugin-react';

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    proxy: {
      '/api': 'http://localhost:8080',
    },
  },
  build: {
    sourcemap: true,
    rollupOptions: {
      output: {
        manualChunks: { vendor: ['react', 'react-dom'] },
      },
    },
  },
});

ベストプラクティス

  • TypeScript の型ヒントと自動補完には defineConfig を使用します
  • 開発中の API 呼び出しには、server.proxy でプロキシを設定します
  • ベンダーコードの分割には、build.rollupOptions.output.manualChunks を使用します
  • 開発環境ではソースマップを有効にし、本番環境ではビルドサイズを小さくするため無効にします
  • 環境変数には import.meta.env を使用します（VITE_ をプレフィックスとして付けます）

リソース

キーワード

Vite、ビルドツール、開発サーバー、HMR、設定、プラグイン、SSR、CLI、依存関係の事前バンドル、アセット

コメント

Markdown 対応