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

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

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 интеграций чтобы узнать все возможности написания интеграции.

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

Заголовок раздела Пользовательские опции

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

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