Перейти к содержимому

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

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

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

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

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

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

SSR адаптеры

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

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

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

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

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

Окно терминала
npx astro add react

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

Окно терминала
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. Встроенный объект
    {name: 'namespace:id', hooks: { /* ... */ }},
    ]
    });

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

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

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

  1. Установите интеграцию в зависимости проекта с помощью предпочитаемого менеджера пакетов:

    Окно терминала
    npm install @astrojs/sitemap
  2. Импортируйте интеграцию в файл 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

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

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

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

Окно терминала
npm uninstall @astrojs/react

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

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

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

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

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