Salta ai contenuti

Aggiungi Integrazioni

Le integrazioni di Astro aggiungono nuove funzionalità e comportamenti al tuo progetto con solo poche righe di codice. Puoi scrivere una integrazione personalizzata, utilizzare un’integrazione ufficiale o utilizzare integrazioni create dalla comunità.

Le integrazioni possono…

  • Sbloccare React, Vue, Svelte, Solid e altri popolari framework UI.
  • Integrare strumenti come Tailwind e Partytown con poche righe di codice.
  • Aggiungere nuove funzionalità al tuo progetto, come la generazione automatica di sitemap.
  • Scrivere codice personalizzato che si integra nel processo di build, nel server di sviluppo e altro ancora.

Integrazioni Ufficiali

Sezione intitolata Integrazioni Ufficiali

Le seguenti integrazioni sono mantenute da Astro.

Framework UI

Adattatori SSR

Altre Integrazioni

Configurazione Automatica delle Integrazioni

Sezione intitolata Configurazione Automatica delle Integrazioni

Astro include un comando astro add per automatizzare la configurazione delle integrazioni ufficiali. Anche diversi plugin della comunità possono essere aggiunti utilizzando questo comando. Si prega di controllare la documentazione di ogni integrazione per vedere se astro add è supportato, o se devi installare manualmente.

Esegui il comando astro add utilizzando il gestore di pacchetti di tua scelta e la nostra procedura guidata automatica di integrazione aggiornerà il tuo file di configurazione e installerà tutte le dipendenze necessarie.

Terminal window
npx astro add react

È anche possibile aggiungere più integrazioni contemporaneamente!

Terminal window
npx astro add react tailwind partytown

Installazione Manuale

Sezione intitolata Installazione Manuale

Le integrazioni di Astro sono sempre aggiunte tramite la proprietà integrations nel tuo file astro.config.mjs.

Ci sono tre modi comuni per importare un’integrazione nel tuo progetto Astro:

  1. Installare un’integrazione di un pacchetto npm.

  2. Importare la tua integrazione da un file locale all’interno del tuo progetto.

  3. Scrivere la tua integrazione inline, direttamente nel tuo file di configurazione.

    astro.config.mjs
    import { defineConfig } from 'astro/config';
    import installedIntegration from '@astrojs/vue';
    import localIntegration from './my-integration.js';
    

    export default defineConfig({
      integrations: [
        // 1. Importata da un pacchetto npm installato
        installedIntegration(),
        // 2. Importata da un file JS locale
        localIntegration(),
        // 3. Un oggetto inline
        {name: 'namespace:id', hooks: { /* ... */ }},
      ]
    });

Dai un’occhiata al riferimento API di Integrazione per imparare tutti i modi diversi in cui puoi scrivere un’integrazione.

Installazione di un Pacchetto NPM

Sezione intitolata Installazione di un Pacchetto NPM

Installa un’integrazione di un pacchetto NPM utilizzando un gestore di pacchetti, e poi aggiorna manualmente astro.config.mjs.

Ad esempio, per installare l’integrazione @astrojs/sitemap:

  1. Installa l’integrazione nelle dipendenze del tuo progetto utilizzando il gestore di pacchetti preferito:

    Terminal window
    npm install @astrojs/sitemap

  2. Importa l’integrazione nel tuo file astro.config.mjs e aggiungila al tuo array integrations[], insieme a qualsiasi opzione di configurazione:

    astro.config.mjs
    import { defineConfig } from 'astro/config';
    import sitemap from '@astrojs/sitemap';
    

    export default defineConfig({
      // ...
      integrations: [sitemap()],
      // ...
    });

    Nota che diverse integrazioni possono avere diverse impostazioni di configurazione. Leggi la documentazione di ogni integrazione e applica le opzioni di configurazione necessarie alla tua integrazione scelta in astro.config.mjs

Opzioni Personalizzate

Sezione intitolata Opzioni Personalizzate

Le integrazioni sono quasi sempre scritte come funzioni factory che restituiscono l’oggetto di integrazione effettivo. Questo ti permette di passare argomenti e opzioni alla funzione factory che personalizzano l’integrazione per il tuo progetto.

integrations: [
  // Esempio: Personalizza la tua integrazione con argomenti di funzione
  sitemap({filter: true})
]

Disattivare un’Integrazione

Sezione intitolata Disattivare un’Integrazione

Le integrazioni false vengono ignorate, quindi puoi attivare e disattivare le integrazioni senza preoccuparti di valori undefined e booleani lasciati indietro.

integrations: [
  // Esempio: Salta la creazione di una sitemap su Windows
  process.platform !== 'win32' && sitemap()
]

Aggiornamento delle Integrazioni

Sezione intitolata Aggiornamento delle Integrazioni

Per aggiornare tutte le integrazioni ufficiali contemporaneamente, esegui il comando @astrojs/upgrade. Questo aggiornerà sia Astro che tutte le integrazioni ufficiali alle loro ultime versioni.

Aggiornamento Automatico

Sezione intitolata Aggiornamento Automatico
Terminal window
# Aggiorna Astro e le integrazioni ufficiali insieme all'ultima versione
npx @astrojs/upgrade

Aggiornamento Manuale

Sezione intitolata Aggiornamento Manuale

Per aggiornare manualmente una o più integrazioni, utilizza il comando appropriato per il tuo gestore di pacchetti.

Terminal window
# Esempio: aggiorna le integrazioni React e Tailwind
npm install @astrojs/react@latest @astrojs/tailwind@latest

Rimozione di un’Integrazione

Sezione intitolata Rimozione di un’Integrazione

Per rimuovere un’integrazione, disinstalla prima l’integrazione dal tuo progetto

Terminal window
npm uninstall @astrojs/react

Successivamente, rimuovi l’integrazione dal tuo file astro.config.*:

astro.config.mjs
import { defineConfig } from 'astro/config';


import react from '@astrojs/react';


export default defineConfig({
  integrations: [
    react()
  ]
});

Trovare Altre Integrazioni

Sezione intitolata Trovare Altre Integrazioni

Puoi trovare molte integrazioni sviluppate dalla comunità nella Directory delle Integrazioni di Astro. Segui i link lì per istruzioni dettagliate sull’uso e la configurazione.

Costruire la Tua Propria Integrazione

Sezione intitolata Costruire la Tua Propria Integrazione

L’API di Integrazione di Astro è ispirata da Rollup e Vite, e progettata per essere familiare a chiunque abbia mai scritto un plugin Rollup o Vite prima.

Dai un’occhiata al riferimento API di Integrazione per imparare cosa possono fare le integrazioni e come scriverne una tu stesso.