プラグインの使用 #

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

偽値（falsy な値）のプラグインは無視され、プラグインを簡単にアクティブ化や非アクティブ化するのに使えます。

プラグインの検索 #

公式プラグインの情報は、 プラグインのセクション をご覧ください。コミュニティのプラグインは awesome-vite に一覧があります。互換性のある Rollup プラグインは、 Vite Rollup プラグイン に互換性のある公式 Rollup プラグインの一覧と使い方があります。または一覧になければ、 互換性のある Rollup プラグインのセクション を確認してください。

推奨される規約 に従ったプラグインは次の方法でも見つけることができます。 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 ガイド を参照してください。また、 enforce ラベルと人気のプラグインの使い方は Vite Rollup プラグイン の互換性一覧にあります。

条件付きの適用 #

デフォルトでは、プラグインは配信とビルドの両方で起動されます。配信時やビルド時のみに条件付きでプラグインを適用する必要がある場合は、 apply プロパティを使って 'build' か 'serve' の時にだけプラグインを呼び出します:

// vite.config.js
import typescript2 from 'rollup-plugin-typescript2'
import { defineConfig } from 'vite'

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

プラグインのビルド #

プラグインの作成に関するドキュメントは、 プラグイン API ガイド をご覧ください。