Die Verwendung von Plugins

Vite kann mithilfe von Plugins erweitert werden, die auf der gut durchdachten Plugin-Schnittstelle von Rollup basieren und einige zusätzliche Vite-spezifische Optionen bieten. Dies bedeutet, dass Vite-Benutzer auf das etablierte Ökosystem von Rollup-Plugins zurückgreifen können, während sie gleichzeitig den Dev-Server und die SSR-Funktionalität nach Bedarf erweitern können.

Hinzufügen eines Plugins

Um ein Plugin zu verwenden, muss es zu den devDependencies des Projekts hinzugefügt und im plugins-Array in der vite.config.js-Konfigurationsdatei aufgenommen werden. Zum Beispiel kann das offizielle @vitejs/plugin-legacy verwendet werden, um Unterstützung für veraltete Browser bereitzustellen:

$ 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 akzeptiert auch Presets, die mehrere Plugins als ein einzelnes Element enthalten. Dies ist nützlich für komplexe Funktionen (wie Framework-Integration), die mit mehreren Plugins implementiert werden. Das Array wird intern abgeflacht.

Falsche Plugins werden ignoriert, was dazu verwendet werden kann, Plugins einfach zu aktivieren oder zu deaktivieren.

Plugins finden

HINWEIS

Vite zielt darauf ab, Out-of-the-Box-Unterstützung für gängige Webentwicklungsmuster bereitzustellen. Bevor Sie nach einem Vite- oder kompatiblen Rollup-Plugin suchen, werfen Sie einen Blick in den Feature-Guide. Viele der Fälle, in denen ein Plugin in einem Rollup-Projekt benötigt wird, sind bereits in Vite abgedeckt.

In der Plugins-Sektion finden Sie Informationen über offizielle Plugins. Community-Plugins sind in awesome-vite aufgeführt.

Sie können auch Plugins finden, die den empfohlenen Konventionen folgen, indem Sie eine npm-Suche nach vite-plugin für Vite-Plugins oder eine npm-Suche nach rollup-plugin für Rollup-Plugins verwenden.

Erzwingen der Plugin-Reihenfolge

Für die Kompatibilität mit einigen Rollup-Plugins kann es notwendig sein, die Reihenfolge des Plugins zu erzwingen oder es nur zur Build-Zeit anzuwenden. Dies sollte ein Implementierungsdetail für Vite-Plugins sein. Sie können die Position eines Plugins mit dem enforce-Modifikator erzwingen:

• pre: Plugin vor den Vite-Kernplugins aufrufen
• default: Plugin nach den Vite-Kernplugins aufrufen
• post: Plugin nach den Vite-Build-Plugins aufrufen

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

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

Ausführliche Informationen finden Sie im Plugins API Guide.

Bedingte Anwendung

Standardmäßig werden Plugins sowohl für den Dev-Server als auch für den Build aufgerufen. In Fällen, in denen ein Plugin nur während des Dev-Servers oder des Builds bedingt angewendet werden muss, verwenden Sie die apply-Eigenschaft, um sie nur während des 'build' oder 'serve' aufzurufen:

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

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

Erstellen von Plugins

Werfen Sie einen Blick in den Plugins API Guide für Dokumentation zur Erstellung von Plugins.