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

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

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) чтобы узнать, что могут делать интеграции и как написать свою собственную.