Vite Development

Vite、モダン JavaScript/TypeScript ビルドツール、フロントエンド開発のエキスパートです。

主要原則

• ネイティブ ES モジュールを活用して高速開発を実現
• 可能な限り Vite のデフォルト設定を活用
• カスタマイズが必要な部分のみ設定
• 開発時とビルド時の違いを理解
• 開発速度と本番パフォーマンスの両方で最適化

プロジェクトセットアップ

基本的な設定

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

export default defineConfig({
  plugins: [react()],
  server: {
    port: 3000,
    open: true,
  },
  build: {
    outDir: 'dist',
    sourcemap: true,
  },
});

パスエイリアス

import { defineConfig } from 'vite';
import path from 'path';

export default defineConfig({
  resolve: {
    alias: {
      '@': path.resolve(__dirname, './src'),
      '@components': path.resolve(__dirname, './src/components'),
      '@utils': path.resolve(__dirname, './src/utils'),
    },
  },
});

環境変数

使用方法

// .env
VITE_API_URL=https://api.example.com
VITE_APP_TITLE=My App

// コード内
const apiUrl = import.meta.env.VITE_API_URL;
const isDev = import.meta.env.DEV;
const isProd = import.meta.env.PROD;
const mode = import.meta.env.MODE;

型定義

// src/vite-env.d.ts
/// <reference types="vite/client" />

interface ImportMetaEnv {
  readonly VITE_API_URL: string;
  readonly VITE_APP_TITLE: string;
}

interface ImportMeta {
  readonly env: ImportMetaEnv;
}

Hot Module Replacement

手動 HMR

// HMR サポートがないライブラリの場合
if (import.meta.hot) {
  import.meta.hot.accept('./module.ts', (newModule) => {
    // 更新されたモジュールを処理
    console.log('Module updated:', newModule);
  });

  import.meta.hot.dispose(() => {
    // モジュールが置き換わる前のクリーンアップ
  });
}

アセット処理

静的アセット

// URL としてインポート
import imageUrl from './image.png';
// <img src={imageUrl} />

// 文字列としてインポート (生データ)
import shaderCode from './shader.glsl?raw';

// Worker としてインポート
import Worker from './worker.ts?worker';
const worker = new Worker();

Public ディレクトリ

public/
├── favicon.ico      # /favicon.ico で提供
├── robots.txt       # /robots.txt で提供
└── images/          # /images/ で提供

フレームワーク統合

React

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

export default defineConfig({
  plugins: [
    react({
      // Fast Refresh を有効化
      fastRefresh: true,
      // Babel プラグイン
      babel: {
        plugins: ['@emotion/babel-plugin'],
      },
    }),
  ],
});

Vue

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  plugins: [vue()],
});

Svelte

import { defineConfig } from 'vite';
import { svelte } from '@sveltejs/vite-plugin-svelte';

export default defineConfig({
  plugins: [svelte()],
});

ビルド最適化

コード分割

// 動的インポートは独立したチャンクを作成
const AdminPanel = lazy(() => import('./AdminPanel'));

// 手動チャンク
export default defineConfig({
  build: {
    rollupOptions: {
      output: {
        manualChunks: {
          vendor: ['react', 'react-dom'],
          utils: ['lodash', 'date-fns'],
        },
      },
    },
  },
});

チャンクサイズ最適化

export default defineConfig({
  build: {
    chunkSizeWarningLimit: 500,
    rollupOptions: {
      output: {
        manualChunks(id) {
          if (id.includes('node_modules')) {
            return id.split('node_modules/')[1].split('/')[0];
          }
        },
      },
    },
  },
});

CSS 処理

CSS Modules

// styles.module.css は自動検出
import styles from './styles.module.css';

// <div className={styles.container}>

PostCSS

// postcss.config.js
export default {
  plugins: {
    tailwindcss: {},
    autoprefixer: {},
  },
};

プリプロセッサ

// パッケージがインストールされていれば自動的に処理
// npm install -D sass
import './styles.scss';

プロキシ設定

export default defineConfig({
  server: {
    proxy: {
      '/api': {
        target: 'http://localhost:4000',
        changeOrigin: true,
        rewrite: (path) => path.replace(/^\/api/, ''),
      },
      '/socket.io': {
        target: 'ws://localhost:4000',
        ws: true,
      },
    },
  },
});

プラグイン開発

// my-vite-plugin.ts
import type { Plugin } from 'vite';

export function myPlugin(): Plugin {
  return {
    name: 'my-plugin',

    // フック: 設定を修正
    config(config, { mode }) {
      return {
        define: {
          __BUILD_TIME__: JSON.stringify(new Date().toISOString()),
        },
      };
    },

    // フック: コードを変換
    transform(code, id) {
      if (id.endsWith('.md')) {
        return {
          code: `export default ${JSON.stringify(code)}`,
          map: null,
        };
      }
    },

    // フック: 開発サーバーを設定
    configureServer(server) {
      server.middlewares.use((req, res, next) => {
        // カスタムミドルウェア
        next();
      });
    },
  };
}

Vitest でのテスト

// vite.config.ts
import { defineConfig } from 'vite';

export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
    setupFiles: './src/test/setup.ts',
    coverage: {
      provider: 'v8',
      reporter: ['text', 'json', 'html'],
    },
  },
});

SSR 設定

export default defineConfig({
  build: {
    ssr: true,
    rollupOptions: {
      input: './src/entry-server.ts',
    },
  },
  ssr: {
    external: ['express'],
    noExternal: ['my-ui-library'],
  },
});

ライブラリモード

export default defineConfig({
  build: {
    lib: {
      entry: './src/index.ts',
      name: 'MyLib',
      fileName: (format) => `my-lib.${format}.js`,
    },
    rollupOptions: {
      external: ['react', 'react-dom'],
      output: {
        globals: {
          react: 'React',
          'react-dom': 'ReactDOM',
        },
      },
    },
  },
});

ベストプラクティス

• vite preview を使用してローカルで本番ビルドをテスト
• ESM をサポートする依存関係は通常の deps に保持
• CommonJS 依存関係に対して optimizeDeps.include を使用
• デバッグのために build.sourcemap を有効化
• 開発サーバーの起動を高速化するために server.warmup を使用