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

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

Интеграции 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

Заголовок раздела Установка пакета NPM

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