Integrationen nutzen

Astro-Integrationen erm√∂glichen es dir, mit nur wenigen Zeilen Code neue Funktionen und Verhaltensweisen zu deinem Projekt hinzuzuf√ľgen. Du kannst eine Integration selbst schreiben, eine offizielle Integration verwenden oder Integrationen aus der Community nutzen.

Integrationen können…

  • React, Vue, Svelte, Solid und andere beliebte UI-Frameworks nutzbar machen.
  • Tools wie Tailwind und Partytown mit wenigen Zeilen Code integrieren.
  • Neue Features zu deinem Projekt hinzuf√ľgen, wie z.B. automatische Sitemap-Generierung.
  • Eigenen Code schreiben, der sich in den Erzeugungsprozess, den Entwicklungs-Server und mehr einh√§ngen l√§sst.

UI-Frameworks

SSR-Adapter

Sonstiges

Automatische Einrichtung von Integrationen

Abschnitt betitelt Automatische Einrichtung von Integrationen

Astro stellt ein astro add-Kommando zur Verf√ľgung, um die Einrichtung von Integrationen zu automatisieren.

F√ľhre das astro add-Kommando mit dem Paketmanager deiner Wahl aus, und unser automatischer Integrations-Wizard wird deine Konfigurationsdatei aktualisieren und alle notwendigen Abh√§ngigkeiten installieren.

Terminal-Fenster
npx astro add react

Es ist sogar möglich, mehrere Integrationen gleichzeitig zu konfigurieren!

Terminal-Fenster
npx astro add react tailwind partytown

Astro-Integrationen werden immer √ľber die integrations-Option in deiner astro.config.mjs-Datei konfiguriert.

Es gibt drei √ľbliche Wege, um eine Integration in dein Astro-Projekt zu importieren:

  1. Eine Integration √ľber ein npm-Paket installieren.
  2. Deine eigene Integration √ľber eine lokale Datei innerhalb deines Projekts importieren.
  3. Deine eigene Integration direkt in der Konfigurationsdatei schreiben.
astro.config.mjs
import {defineConfig} from 'astro/config';
import installedIntegration from '@astrojs/vue';
import localIntegration from './my-integration.js';
export default defineConfig({
integrations: [
// 1. Aus einem installiertem npm-Paket importieren
installedIntegration(),
// 2. Aus einer lokalen JS-Datei importieren
localIntegration(),
// 3. Ein Inline-Objekt
{name: 'namespace:id', hooks: { /* ... */ }},
]
})

Sieh dir die Integrations-API an, um mehr dar√ľber zu erfahren, wie du deine eigenen Integrationen erstellen kannst.

Integrationen werden in der Regel als Factory-Funktionen entwickelt, die das Integrations-Objekt zur√ľckliefern. Dadurch kannst du Argumente und Optionen an die Funktion √ľbergeben, um die Integration zu konfigurieren.

integrations: [
// Beispiel: Argumente an eine Integration √ľbergeben
sitemap({filter: true})
]

Integrationen aktivieren und deaktivieren

Abschnitt betitelt Integrationen aktivieren und deaktivieren

Integrationen mit falsy-Werten werden ignoriert. Dadurch k√∂nnen sie aktiviert oder deaktiviert werden, und man muss sich keine Gedanken √ľber hinterlassene undefined- und Boolean-Werte machen.

integrations: [
// Beispiel: Keine Sitemap unter Windows erstellen
process.platform !== 'win32' && sitemap()
]

Eine Vielzahl von Integrationen, die durch die Community entwickelt werden, können in Astros Integrations-Verzeichnis gefunden werden. Folge den dortigen Links, um detaillierte Anleitungen zu ihrer Benutzung und Konfiguration zu erhalten.

Astros Integrations-API ist durch Rollup und Vite inspiriert und wurde so gestaltet, dass sie sich f√ľr alle vertraut anf√ľhlen sollte, die jemals ein Rollup- oder Vite-Plugin geschrieben haben.

Sieh dir die Integrations-API an, um mehr dar√ľber zu erfahren, was Integrationen leisten k√∂nnen und wie du deine eigenen Integrationen erstellen kannst.