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.

Directory delle integrazioni

Sfoglia o cerca il set completo di centinaia di integrazioni ufficiali e della comunità nella nostra directory delle integrazioni. Trova pacchetti da aggiungere al tuo progetto Astro per autenticazione, analisi, performance, SEO, accessibilità, UI, strumenti per sviluppatori e altro ancora.

Integrazioni Ufficiali

Sezione intitolata Integrazioni Ufficiali

Le seguenti integrazioni sono mantenute da Astro.

Framework UI

• 

  @astrojs/alpinejs

• 

  @astrojs/lit

• 

  @astrojs/preact

• 

  @astrojs/react

• 

  @astrojs/solid⁠-⁠js

• 

  @astrojs/svelte

• 

  @astrojs/vue

Adattatori SSR

• 

  @astrojs/cloudflare

• 

  @astrojs/netlify

• 

  @astrojs/node

• 

  @astrojs/vercel

Altre Integrazioni

• 

  @astrojs/db

• 

  @astrojs/markdoc

• 

  @astrojs/mdx

• 

  @astrojs/partytown

• 

  @astrojs/sitemap

• 

  @astrojs/tailwind

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.

npm

npx astro add react

pnpm

pnpm astro add react

Yarn

yarn astro add react

È anche possibile aggiungere più integrazioni contemporaneamente!

npm

npx astro add react tailwind partytown

pnpm

pnpm astro add react tailwind partytown

Yarn

yarn astro add react tailwind partytown

Gestione delle dipendenze delle integrazioni

Se vedi avvisi come Cannot find package '[package-name]' dopo aver aggiunto un’integrazione, il tuo gestore di pacchetti potrebbe non aver installato peer dependencies per te. Per installare questi pacchetti mancanti, esegui npm install [package-name].

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:

   npm

   npm install @astrojs/sitemap

   pnpm

   pnpm add @astrojs/sitemap

   Yarn

   yarn add @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

npm

# Aggiorna Astro e le integrazioni ufficiali insieme all'ultima versione
npx @astrojs/upgrade

pnpm

# Aggiorna Astro e le integrazioni ufficiali insieme all'ultima versione
pnpm dlx @astrojs/upgrade

Yarn

# Aggiorna Astro e le integrazioni ufficiali insieme all'ultima versione
yarn dlx @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.

npm

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

pnpm

# Esempio: aggiorna le integrazioni React e Tailwind
pnpm add @astrojs/react@latest @astrojs/tailwind@latest

Yarn

# Esempio: aggiorna le integrazioni React e Tailwind
yarn add @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

npm

npm uninstall @astrojs/react

pnpm

pnpm remove @astrojs/react

Yarn

yarn remove @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.