Пропустить до содержимого

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

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

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

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

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

UI фреймворки

SSR адаптеры

Другое

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

Astro включает команду astro add, которая автоматизирует настройку интеграций.

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

Terminal window
npx astro add react

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

Terminal window
npx astro add react tailwind partytown

Использование интеграций

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

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

  1. Установка интеграции через пакет npm.
  2. Импорт вашей собственной интеграции из локального файла внутри вашего проекта.
  3. Написание вашей интеграции прямо в конфигурационном файле.
astro.config.mjs
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. Inline-объект
{name: 'namespace:id', hooks: { /* ... */ }},
]
})

Посмотрите справочник API интеграций (EN) чтобы узнать все возможности написания интеграции.

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

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

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

Включение интеграций

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

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

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

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

Terminal window
npm uninstall @astrojs/image

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

astro.config.mjs
import { defineConfig } from 'astro/config'
import image from "@astrojs/image";
export default defineConfig({
integrations: [
image()
]
})

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

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

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

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

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