Utilisation de plugins

Vite peut être étendu en utilisant des plugins, qui sont basés sur l'interface bien conçue des plugins de Rollup avec quelques options supplémentaires spécifiques à Vite. Cela signifie que les utilisateurs de Vite peuvent s'appuyer sur l'écosystème mature des plugins Rollup, tout en étant capable d'étendre le serveur de développement et les fonctionnalités SSR selon les besoins.

Ajout d'un plugin

Pour utiliser un plugin, il doit être ajouté aux devDependencies du projet et inclus dans le tableau plugins du fichier de configuration vite.config.js. Par exemple, pour fournir un support pour les anciens navigateurs, le plugin officiel @vitejs/plugin-legacy peut être utilisé :

$ 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 accepte également les préréglages comprenant plusieurs plugins comme un seul élément. Ceci est utile pour les fonctionnalités complexes (comme l'intégration de frameworks) qui sont implémentées en utilisant plusieurs plugins. Le tableau sera aplati en interne.

Les plugins incomplets seront ignorés, ce qui peut être utilisé pour activer ou désactiver facilement les plugins.

Recherche de plugins

NOTE

Vite vise à fournir un support prêt à l'emploi pour les modèles de développement web courants. Avant de chercher un plugin Vite ou Rollup compatible, consultez le Guide des fonctionnalités. Beaucoup de cas où un plugin serait nécessaire dans un projet Rollup sont déjà couverts dans Vite. :: :

Consultez la section Plugins pour des informations sur les plugins officiels. Les plugins communautaires sont listés dans awesome-vite. Pour les plugins Rollup compatibles, consultez Vite Rollup Plugins pour une liste des plugins officiels Rollup compatibles avec des instructions d'utilisation ou la section Rollup Plugin Compatibility au cas où il n'y figure pas.

Vous pouvez également trouver les plugins qui suivent les conventions recommandées en utilisant une npm search for vite-plugin pour les plugins Vite ou une npm search for rollup-plugin pour les plugins Rollup.

Appliquer l'ordre des plugins

Pour la compatibilité avec certains plugins Rollup, il peut être nécessaire de faire respecter l'ordre des plugins ou de ne les appliquer qu'au moment de la construction. Ceci devrait être un détail d'implémentation pour les plugins Vite. Vous pouvez imposer la position d'un plugin avec le modificateur enforce :

pre : invoque le plugin avant les plugins de base Vite
default : invoque le plugin après les plugins de base Vite
post : invoque le plugin après les plugins de construction Vite

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

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

Consultez le Guide de l'API des plugins pour des informations détaillées, et recherchez le label enforce et les instructions d'utilisation des plugins les plus populaires dans la liste de compatibilité de Vite Rollup Plugins.

Application conditionnelle

Par défaut, les plugins sont invoqués à la fois pour serve et build. Dans les cas où un plugin doit être appliqué de manière conditionnelle uniquement pendant le service ou la construction, utilisez la propriété apply pour ne les invoquer que pendant 'build' ou 'serve' :

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

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

Construction des plugins

Consultez le Guide de l'API des plugins pour obtenir de la documentation sur la création de plugins.

Utilisation de plugins #

Ajout d'un plugin #

Recherche de plugins #

Appliquer l'ordre des plugins #

Application conditionnelle #

Construction des plugins #