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

Le seguenti integrazioni sono mantenute da Astro.

Framework UI

Adattatori SSR

Altre Integrazioni

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.

npx astro add react

pnpm astro add react

yarn astro add react

È anche possibile aggiungere più integrazioni contemporaneamente!

npx astro add react tailwind partytown

pnpm astro add react tailwind partytown

yarn astro add react tailwind partytown

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:

Installare un’integrazione di un pacchetto npm.
Importare la tua integrazione da un file locale all’interno del tuo progetto.

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

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

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:

Installa l’integrazione nelle dipendenze del tuo progetto utilizzando il gestore di pacchetti preferito:
- npm
- pnpm
- Yarn
Terminal window
npm install @astrojs/sitemap
Terminal window
pnpm add @astrojs/sitemap
Terminal window
yarn add @astrojs/sitemap
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

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

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

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

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

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

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

Aggiornamento Manuale

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

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

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

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

Rimozione di un’Integrazione

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

npm uninstall @astrojs/react

pnpm remove @astrojs/react

yarn remove @astrojs/react

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

import { defineConfig } from 'astro/config';

import react from '@astrojs/react';

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

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

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.

Contribuisci

Comunità

Aggiungi Integrazioni

Integrazioni Ufficiali

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