{"id":56132,"date":"2025-06-18T10:56:18","date_gmt":"2025-06-18T08:56:18","guid":{"rendered":"https:\/\/www.d-velop.de\/blog\/?p=56132"},"modified":"2025-06-18T10:56:22","modified_gmt":"2025-06-18T08:56:22","slug":"vite-plugins","status":"publish","type":"post","link":"https:\/\/www.d-velop.de\/blog\/engineering\/vite-plugins\/","title":{"rendered":"Was man mit Vite-Plugins so alles machen kann"},"content":{"rendered":"\n

Wer in der Welt von JavaScript unterwegs ist, wird fr\u00fcher oder sp\u00e4ter mit einem Build-Tool in Ber\u00fchrung kommen. Vite<\/a> spielt dabei seit mehreren Jahren eine immer gr\u00f6\u00dfere Rolle. Neben der Performance und dem komfortablen Dev-Server ist das Plugin-System ein wichtiger Faktor. Viele beliebte Frameworks wie Vue<\/a>, SvelteKit<\/a> oder Nuxt<\/a> setzen auf Vite-Plugins, um sich zu integrieren.<\/p>\n\n\n\n

Wie diese Plugins funktionieren, was sie alles k\u00f6nnen und wie du selbst ein Plugin schreiben kannst, das erf\u00e4hrst du in diesem Blog-Post.<\/p>\n\n\n\n

<\/span>Wie funktionieren Vite-Plugins?<\/span><\/h2>\n\n\n\n

Vite-Plugins<\/a> sind eine Erweiterung von Rollup-Plugins<\/a>. Im Grunde sind es blo\u00df Objekte mit einer Reihe von Methoden, den sogenannten Hooks. Diese werden automatisch w\u00e4hrend des Build-Prozesses und im Dev-Server aufgerufen. Die genaue Reihenfolge h\u00e4ngt von der Build-Config und auch von den verwendeten Plugins selbst ab. Aber grob l\u00e4sst sich der Lebenszyklus folgenderma\u00dfen abbilden:<\/p>\n\n\n\n

\"Bild<\/figure>\n\n\n\n

<\/p>\n\n\n\n

Falls mehrere Plugins vorhanden sind, die denselben Hook implementieren, werden sie in der Reihenfolge aufgerufen, in der sie in der vite.config.js registriert wurden. Ein Plugin kann sich allerdings auch \u00fcber die Attribute enforce am Plugin und order am Hook \u201cvordr\u00e4ngeln\u201d.<\/p>\n\n\n\n

<\/span>Was k\u00f6nnen Vite-Plugins?<\/span><\/h2>\n\n\n\n

Insgesamt gibt es 32 Hooks, in diesen Hooks stehen 15 Utility-Functions zur Verf\u00fcgung. Die M\u00f6glichkeiten, damit in den Build-Prozess einzugreifen, sind schier unendlich. Deshalb m\u00f6chte ich an dieser Stelle nur kurz auf die einzelnen M\u00f6glichkeiten eingehen. F\u00fcr eine genauere Dokumentation, schau in die Rollup-<\/a> bzw. Vite-Dokumentationen<\/a>. Die Beschreibungen dort sind allerdings auch etwas oberfl\u00e4chlich. Letztlich habe ich es mir dadurch erschlossen, dass ich einfach mal in einem Test-Projekt ausprobiert habe, was die einzelnen Hooks\/Functions machen.<\/p>\n\n\n\n

Configuration-Hooks<\/h3>\n\n\n\n

Es gibt drei Hooks, die man der Konfiguration zuordnen kann: config, configResolved und options. Sie k\u00f6nnen verwendet werden, um die in der vite.config.js angegebene und die von Vite\/Rollup generierte Konfiguration auszulesen und zu manipulieren.<\/p>\n\n\n\n

config<\/strong><\/p>\n\n\n\n