プラグインの使用

Vite はプラグインを使用して拡張できます。これらのプラグインは Rollup のよく設計されたプラグインインターフェースに基づいており、Vite 固有のオプションがいくつか追加されています。これにより、Vite ユーザーは Rollup プラグインの成熟したエコシステムに依存できるだけでなく、必要に応じて開発サーバーと SSR 機能も拡張できます。

プラグインの追加

プラグインを使用するには、プロジェクトの devDependencies に追加し、vite.config.js 設定ファイルの plugins 配列に含める必要があります。例えば、レガシーブラウザのサポートを提供するには、公式の @vitejs/plugin-legacy を使用できます。

$ npm add -D @vitejs/plugin-legacy

vite.config.js

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

export default defineConfig({
  plugins: [
    legacy({
      targets: ['defaults', 'not IE 11'],
    }),
  ],
})

plugins は、複数のプラグインを単一の要素として含むプリセットも受け入れます。これは、いくつかのプラグインを使用して実装される複雑な機能（フレームワーク統合など）に役立ちます。配列は内部でフラット化されます。

Falsy なプラグインは無視されます。これは、プラグインを簡単にアクティブ化または非アクティブ化するために使用できます。

プラグインの検索

注意

Vite は、一般的な Web 開発パターンをすぐにサポートすることを目指しています。Vite または互換性のある Rollup プラグインを探す前に、「機能ガイド」を確認してください。Rollup プロジェクトでプラグインが必要となる多くのケースは、すでに Vite でカバーされています。

公式プラグインについては、「プラグインセクション」を参照してください。コミュニティプラグインは awesome-vite にリストされています。

また、Vite プラグインの場合は npm search for vite-plugin を使用して、Rollup プラグインの場合は npm search for rollup-plugin を使用して、推奨される規約に従うプラグインを見つけることもできます。

プラグインの順序の強制

一部の Rollup プラグインとの互換性のために、プラグインの順序を強制したり、ビルド時のみに適用したりする必要がある場合があります。これは Vite プラグインの実装の詳細であるべきです。enforce 修飾子を使用してプラグインの位置を強制できます。

• pre: Vite コアプラグインの前にプラグインを呼び出す
• default: Vite コアプラグインの後にプラグインを呼び出す
• post: Vite ビルドプラグインの後にプラグインを呼び出す

vite.config.js

import image from '@rollup/plugin-image'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    {
      ...image(),
      enforce: 'pre',
    },
  ],
})

詳細については、「プラグイン API ガイド」を参照してください。

条件付き適用

デフォルトでは、プラグインは serve と build の両方で呼び出されます。プラグインを serve または build の間のみ条件付きで適用する必要がある場合は、apply プロパティを使用して 'build' または 'serve' の間のみ呼び出します。

vite.config.js

import typescript2 from 'rollup-plugin-typescript2'
import { defineConfig } from 'vite'

export default defineConfig({
  plugins: [
    {
      ...typescript2(),
      apply: 'build',
    },
  ],
})

プラグインの構築

プラグインの作成に関するドキュメントについては、「プラグイン API ガイド」を参照してください。