プラグインを使用します

Viteは、Rollupの適切に設計されたプラグインインターフェイスに基づいたプラグインを使用して拡張できます。これは、Viteユーザーがロールアッププラグインの成熟したエコシステムに頼ることができ、必要に応じてDEVサーバーとSSR機能を拡張することもできることを意味します。

プラグインを追加します

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

$ 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プラグインは無視され、プラグインを簡単にアクティブ化または非アクティブ化するために使用できます。

プラグインを見つける

NOTE

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

公式プラグインの詳細については、プラグインセクションをご覧ください。コミュニティプラグインはAwesome-Viteにリストされています。

また、Viteプラグイン用のVite-PluginのNPM検索、またはRollUpプラグインのRollup-PluginのNPM検索を使用して、推奨コンベンションに従うプラグインを見つけることもできます。

プラグインの注文を施行します

一部のロールアッププラグインとの互換性のために、プラグインの順序を実施するか、ビルド時にのみ適用する必要がある場合があります。これは、Viteプラグインの実装の詳細である必要があります。 enforceモディファイアを使用してプラグインの位置を実施できます。

• pre :Vite Coreプラグインの前にプラグインを呼び出します
• デフォルト:Vite Coreプラグインの後にプラグインを呼び出します
• post :Viteビルドプラグインの後にプラグインを呼び出します

vite.config.js

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

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

詳細については、プラグインAPIガイドをご覧ください。

条件付きアプリケーション

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

vite.config.js

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

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

建物のプラグイン

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