プラグインの使用

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`は、複数のプラグインを含むプリセットを単一要素として受け入れます。これは、複数のプラグインを使用して実装される複雑な機能（フレームワークの統合など）に役立ちます。配列は内部的にフラット化されます。

偽のプラグインは無視されます。これは、プラグインの有効化または無効化を容易に行うために使用できます。

プラグインの検索

注記

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

公式プラグインに関する情報は、プラグインセクションをご覧ください。コミュニティプラグインはawesome-viteにリストされています。

推奨される規約に従うプラグインは、Viteプラグインの場合はvite-pluginのnpm検索、Rollupプラグインの場合はrollup-pluginのnpm検索を使用して検索できます。

プラグインの順序の強制

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

• `pre`：Viteコアプラグインの前にプラグインを呼び出す
• デフォルト：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ガイドをご覧ください。