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.

Katalog integracji

Przeglądaj lub wyszukuj pełen zestaw setek oficjalnych i społecznościowych integracji w naszym katalogu integracji. Znajdź pakiety do dodania do swojego projektu Astro dla uwierzytelniania, analityki, wydajności, SEO, dostępności, interfejsu użytkownika, narzędzi deweloperskich i innych.

Oficjalne integracje

Dział zatytułowany Oficjalne integracje

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

Frameworki UI

• 

  @astrojs/alpinejs

• 

  @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

Automatyczna konfiguracja integracji

Dział zatytułowany 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.

npm

npx astro add react

pnpm

pnpm astro add react

Yarn

yarn astro add react

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

npm

npx astro add react tailwind partytown

pnpm

pnpm astro add react tailwind partytown

Yarn

yarn astro add react tailwind partytown

Obsługa zależności integracji

Jeśli po dodaniu integracji zobaczysz komunikaty ostrzegawcze typu Cannot find package '[nazwa-paczki]', Twój menedżer pakietów nie mógł zainstalować peer dependencies za Ciebie. Aby zainstalować te brakujące pakiety, uruchom npm install [nazwa-paczki].

Instalacja ręczna

Dział zatytułowany 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:

1. Zainstaluj integrację pakietu npm..

2. Zaimportuj własną integrację z lokalnego pliku wewnątrz Twojego projektu.

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

   astro.config.mjs

   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

Dział zatytułowany 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:

1. Zainstaluj integrację do zależności Twojego projektu używając preferowanego menedżera pakietów:

   npm

   npm install @astrojs/sitemap

   pnpm

   pnpm add @astrojs/sitemap

   Yarn

   yarn add @astrojs/sitemap

2. 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

Dział zatytułowany 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

Dział zatytułowany 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

Dział zatytułowany 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

Dział zatytułowany Automatyczna aktualizacja

npm

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

pnpm

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

Yarn

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

Ręczna aktualizacja

Dział zatytułowany Ręczna aktualizacja

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

npm

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

pnpm

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

Yarn

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

Usuwanie integracji

Dział zatytułowany Usuwanie integracji

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

npm

npm uninstall @astrojs/react

pnpm

pnpm remove @astrojs/react

Yarn

yarn remove @astrojs/react

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

astro.config.mjs

import { defineConfig } from 'astro/config';

import react from '@astrojs/react';

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

Znajdowanie więcej integracji

Dział zatytułowany 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

Dział zatytułowany 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ą.