Dodawanie integracji

Integracje Astro dodają nową funkcjonalność i zachowania do Twojego projektu za pomocą zaledwie kilku linijek kodu. Możesz użyć oficjalnej integracji, integracji stworzonych przez społeczność lub zbudować własną integrację.

Integracje mogą…

Odblokować React, Vue, Svelte, Solid i inne popularne frameworki UI za pomocą renderera.
Włączyć renderowanie na żądanie za pomocą adaptera SSR.
Zintegrować narzędzia takie jak Tailwind i Partytown za pomocą kilku linijek kodu.
Dodać nowe funkcje do Twojego projektu, takie jak automatyczne generowanie mapy strony.
Pisać własny kod, który integruje się z procesem budowania, serwerem deweloperskim i znacznie więcej.

Oficjalne integracje

Następujące integracje są utrzymywane przez Astro.

Frameworki UI

Adaptery SSR

Inne

Automatyczna konfiguracja integracji

Astro zawiera polecenie astro add do automatyzacji konfiguracji oficjalnych integracji. Kilka wtyczek społecznościowych może również zostać dodanych za pomocą tego polecenia. Proszę sprawdzić dokumentację każdej integracji, aby zobaczyć, czy astro add jest obsługiwane, czy też musisz zainstalować ją ręcznie.

Uruchom polecenie astro add używając wybranego menedżera pakietów, a nasz automatyczny kreator integracji zaktualizuje Twój plik konfiguracyjny i zainstaluje wszystkie niezbędne zależności.

npx astro add react

pnpm astro add react

yarn astro add react

Możliwe jest nawet dodanie wielu integracji jednocześnie!

npx astro add react tailwind partytown

pnpm astro add react tailwind partytown

yarn astro add react tailwind partytown

Instalacja ręczna

Integracje Astro są zawsze dodawane poprzez właściwość integrations w Twoim pliku astro.config.mjs.

Istnieją trzy powszechne sposoby importowania integracji do Twojego projektu Astro:

Zainstaluj integrację pakietu npm..
Zaimportuj własną integrację z lokalnego pliku wewnątrz Twojego projektu.

Napisz swoją integrację bezpośrednio w pliku konfiguracyjnym.

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

export default defineConfig({
  integrations: [
    // 1. Zaimportowane z zainstalowanego pakietu npm
    installedIntegration(),
    // 2. Zaimportowane z lokalnego pliku JS
    localIntegration(),
    // 3. Obiekt inline
    {name: 'namespace:id', hooks: { /* ... */ }},
  ]
});

Zapoznaj się z referencją Integracji API, aby poznać wszystkie różne sposoby, w jakie możesz napisać integrację.

Instalowanie pakietu NPM

Zainstaluj integrację pakietu NPM używając menedżera pakietów, a następnie zaktualizuj ręcznie astro.config.mjs.

Na przykład, aby zainstalować integrację @astrojs/sitemap:

Zainstaluj integrację do zależności Twojego projektu używając preferowanego menedżera pakietów:
- npm
- pnpm
- Yarn
Okno terminala
npm install @astrojs/sitemap
Okno terminala
pnpm add @astrojs/sitemap
Okno terminala
yarn add @astrojs/sitemap
Zaimportuj integrację do swojego pliku astro.config.mjs i dodaj ją do tablicy integrations[], wraz z dowolnymi opcjami konfiguracyjnymi:
astro.config.mjs
```
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  // ...
  integrations: [sitemap()],
  // ...
});
```
Zauważ, że różne integracje mogą mieć różne ustawienia konfiguracyjne. Przeczytaj dokumentację każdej integracji i zastosuj wszelkie niezbędne opcje konfiguracji do wybranej integracji w astro.config.mjs.

Niestandardowe opcje

Integracje są prawie zawsze tworzone jako funkcje fabryczne, które zwracają właściwy obiekt integracji. Pozwala to na przekazywanie argumentów i opcji do funkcji fabrycznej, które dostosowują integrację do Twojego projektu.

integrations: [
  // Przykład: Dostosuj swoją integrację za pomocą argumentów funkcji
  sitemap({filter: true})
]

Przełączanie integracji

Fałszywe integracje są ignorowane, więc możesz włączać i wyłączać integracje bez martwienia się o pozostawione undefined i wartości logiczne.

integrations: [
  // Przykład: Pomijaj budowanie mapy strony w systemie Windows
  process.platform !== 'win32' && sitemap()
]

Aktualizacja integracji

Aby zaktualizować wszystkie oficjalne integracje naraz, uruchom polecenie @astrojs/upgrade. To zaktualizuje zarówno Astro, jak i wszystkie oficjalne integracje do ich najnowszych wersji.

Automatyczna aktualizacja

# Zaktualizuj Astro i oficjalne integracje razem do najnowszej wersji
npx @astrojs/upgrade

# Zaktualizuj Astro i oficjalne integracje razem do najnowszej wersji
pnpm dlx @astrojs/upgrade

# Zaktualizuj Astro i oficjalne integracje razem do najnowszej wersji
yarn dlx @astrojs/upgrade

Ręczna aktualizacja

Aby ręcznie zaktualizować jedną lub więcej integracji, użyj odpowiedniego polecenia do swojego menedżera pakietów.

# Przykład: zaktualizuj integracje React i Tailwind
npm install @astrojs/react@latest @astrojs/tailwind@latest

# Przykład: zaktualizuj integracje React i Tailwind
pnpm add @astrojs/react@latest @astrojs/tailwind@latest

# Przykład: zaktualizuj integracje React i Tailwind
yarn add @astrojs/react@latest @astrojs/tailwind@latest

Usuwanie integracji

Aby usunąć integrację, najpierw odinstaluj ją z Twojego projektu

npm uninstall @astrojs/react

pnpm remove @astrojs/react

yarn remove @astrojs/react

Następnie usuń integrację z pliku astro.config.*:

import { defineConfig } from 'astro/config';

import react from '@astrojs/react';

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

Znajdowanie więcej integracji

Możesz znaleźć wiele integracji opracowanych przez społeczność w katalogu integracji Astro. Śledź tam linki, aby uzyskać szczegółowe instrukcje dotyczące użytkowania i konfiguracji.

Tworzenie własnej integracji

API integracji Astro jest inspirowane przez Rollup i Vite, i zaprojektowane tak, aby było przyjazne dla każdego, kto kiedykolwiek napisał wtyczkę Rollup lub Vite.

Zapoznaj się z referencją Integracji API, aby dowiedzieć się, co integracje mogą zrobić i jak napisać własną.

Pomóż nam

Społeczność

Dodawanie integracji

Oficjalne integracje

Frameworki UI

@astrojs/alpinejs

@astrojs/lit

@astrojs/preact

@astrojs/react

@astrojs/solid⁠-⁠js

@astrojs/svelte

@astrojs/vue

Adaptery SSR

@astrojs/cloudflare

@astrojs/netlify

@astrojs/node

@astrojs/vercel

Inne

@astrojs/db

@astrojs/markdoc

@astrojs/mdx

@astrojs/partytown

@astrojs/sitemap

@astrojs/tailwind