Добавление интеграций

Интеграции Astro добавляют новый функционал и возможности в ваш проект всего за несколько строк кода. Вы можете написать собственную интеграцию, использовать официальную интеграцию или интеграцию, созданную сообществом.

Интеграции могут…

Добавить React, Vue, Svelte, Solid и другие популярные фреймворки пользовательского интерфейса.
Интегрировать такие инструменты, как Tailwind и Partytown, с помощью нескольких строк кода.
Добавлять новые функции в ваш проект, например автоматическую генерацию карты сайта.
Писать пользовательский код, который встраивается в процесс сборки, серверу разработки и т. д.

Официальные интеграции

Следующие интеграции поддерживаются Astro.

UI-фреймворки

SSR адаптеры

Другие интеграции

Автоматическая настройка интеграций

Astro включает команду astro add для автоматической установки официальных интеграций. Некоторые плагины сообщества также могут быть добавлены с помощью этой команды. Пожалуйста, проверьте в документации к каждой интеграции, поддерживается ли astro add, или вы должны установить вручную.

Запустите команду astro add с помощью выбранного вами менеджера пакетов, и наш автоматический мастер интеграции обновит ваш конфигурационный файл и установит все необходимые зависимости.

npx astro add react

pnpm astro add react

yarn astro add react

Можно даже добавить несколько интеграций одновременно!

npx astro add react tailwind partytown

pnpm astro add react tailwind partytown

yarn astro add react tailwind partytown

Установка вручную

Интеграции Astro всегда добавляются через свойство integrations в вашем файле astro.config.mjs.

Существует три основных способа импортировать интеграцию в ваш проект Astro:

Установить интеграцию из пакета npm.
Импортировать собственную интеграцию из локального файла внутри проекта.

Написать свою интеграцию встроенно, прямо в вашем конфигурационном файле.

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

export default defineConfig({
  integrations: [
    // 1. Импортируется из установленного пакета npm
    installedIntegration(),
    // 2. Импортируется из локального JS-файла
    localIntegration(),
    // 3. Встроенный объект
    {name: 'namespace:id', hooks: { /* ... */ }},
  ]
});

Ознакомьтесь со справочником API интеграций, чтобы узнать о различных способах написания интеграции.

Установка пакета NPM

Установите интеграцию пакета NPM с помощью менеджера пакетов, а затем обновите astro.config.mjs вручную.

Например, чтобы установить интеграцию @astrojs/sitemap:

Установите интеграцию в зависимости проекта с помощью предпочитаемого менеджера пакетов:
- npm
- pnpm
- Yarn
Окно терминала
npm install @astrojs/sitemap
Окно терминала
pnpm add @astrojs/sitemap
Окно терминала
yarn add @astrojs/sitemap
Импортируйте интеграцию в файл astro.config.mjs и добавьте ее в массив integrations[] вместе с любыми параметрами конфигурации:
astro.config.mjs
```
import { defineConfig } from 'astro/config';
import sitemap from '@astrojs/sitemap';

export default defineConfig({
  // ...
  integrations: [sitemap()],
  // ...
});
```
Обратите внимание, что у разных интеграций могут быть разные настройки конфигурации. Прочитайте документацию по каждой интеграции и примените все необходимые параметры конфигурации к выбранной вами интеграции в файле astro.config.mjs.

Пользовательские опции

Интеграции почти всегда создаются как фабричные функции, которые возвращают фактический объект интеграции. Это позволяет передавать в функцию аргументы и параметры, которые настраивают интеграцию для вашего проекта.

integrations: [
  // Пример: Настройка интеграции с помощью аргументов функции
  sitemap({filter: true})
]

Переключить интеграцию

Интеграции, возвращающие ложные значения, игнорируются, поэтому вы можете включать и отключать интеграции без беспокойства об оставленных undefined и булевых значениях.

integrations: [
  // Пример: Пропуск создания карты сайта в Windows
  process.platform !== 'win32' && sitemap()
]

Обновление интеграций

Чтобы обновить все официальные интеграции сразу, выполните команду @astrojs/upgrade. Это приведет к обновлению Astro и всех официальных интеграций до последних версий.

Автоматическое обновление

# Обновление Astro и официальных интеграций до последних версий
npx @astrojs/upgrade

# Обновление Astro и официальных интеграций до последних версий
pnpm dlx @astrojs/upgrade

# Обновление Astro и официальных интеграций до последних версий
yarn dlx @astrojs/upgrade

Обновление вручную

Чтобы обновить одну или несколько интеграций вручную, используйте соответствующую команду для вашего менеджера пакетов.

# Пример: обновление интеграций React и Tailwind
npm install @astrojs/react@latest @astrojs/tailwind@latest

# Пример: обновление интеграций React и Tailwind
pnpm add @astrojs/react@latest @astrojs/tailwind@latest

# Пример: обновление интеграций React и Tailwind
yarn add @astrojs/react@latest @astrojs/tailwind@latest

Удаление интеграции

Чтобы удалить интеграцию, сначала удалите ее из проекта

npm uninstall @astrojs/react

pnpm remove @astrojs/react

yarn remove @astrojs/react

Далее удалите интеграцию из файла astro.config.*:

import { defineConfig } from 'astro/config';

import react from '@astrojs/react';

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

Поиск Дополнительных Интеграций

Вы можете найти множество интеграций, разработанных сообществом, в Каталоге Интеграций Astro. Переходите по ссылкам, чтобы получить подробные инструкции по использованию и настройке.

Создание Собственной Интеграции

API Интеграции Astro вдохновлен Rollup и Vite и разработан так, чтобы быть знакомым любому, кто когда-либо писал плагин Rollup или Vite.

Ознакомьтесь со справочником по API Интеграций, чтобы узнать, что могут делать интеграции и как написать свою собственную.

Внести свой вклад

Сообщество

Добавление интеграций

Официальные интеграции

UI-фреймворки

@astrojs/alpinejs

@astrojs/lit

@astrojs/preact

@astrojs/react

@astrojs/solid⁠-⁠js

@astrojs/svelte

@astrojs/vue

SSR адаптеры

@astrojs/cloudflare

@astrojs/netlify

@astrojs/node

@astrojs/vercel

Другие интеграции

@astrojs/db

@astrojs/markdoc

@astrojs/mdx

@astrojs/partytown

@astrojs/sitemap

@astrojs/tailwind