添加集成

使用 Astro 集成只需几行代码就能为你的项目添加新的功能和行为。你可以使用官方集成，社区构建的集成，甚至可以构建自己的自定义集成。

集成能够…

使用渲染器解锁 React、Vue、Svelte、Solid 和其他流行的 UI 框架。
使用 SSR 适配器 (EN) 启用按需渲染。
只需几行代码就能整合 Tailwind 和 Partytown 等工具。
为你的项目添加新功能，如自动生成网站地图。
编写自定义代码，与构建过程、开发服务器等挂钩。

官方集成

以下集成由 Astro 维护。

Front-end frameworks

SSR adapters

Other integrations

自动集成设置

Astro 包含了一个 astro add 命令来自动设置官方集成。许多社区插件也可以使用这个命令添加。请查阅每个集成的文档，以确定是否支持 astro add，或者你是否需要手动安装。

只需用你的包管理器运行 astro add 命令，我们的自动集成向导将更新你的配置文件并安装任何必要的依赖。

npx astro add react

pnpm astro add react

yarn astro add react

甚至还可以同时配置多个集成！

npx astro add react tailwind partytown

pnpm astro add react tailwind partytown

yarn astro add react tailwind partytown

手动安装

Astro 集成总是添加在 astro.config.mjs 文件中的 integrations 属性。

有三种常见的方法来导入集成到你的 Astro 项目：

安装 npm 包集成。
从项目内部的本地文件导入你自己的集成。

直接在配置文件中内联编写集成。

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 包集成，然后手动更新 astro.config.mjs。

例如，安装 @astrojs/sitemap 集成：

使用你偏好的包管理器将集成安装到项目依赖中：
- npm
- pnpm
- Yarn
终端窗口
npm install @astrojs/sitemap
终端窗口
pnpm add @astrojs/sitemap
终端窗口
yarn add @astrojs/sitemap
将集成导入到你的 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 和布尔值问题，Astro 会自动忽略假值的集成。

integrations: [
  // 示例：在 Windows 上跳过网站地图的构建
  process.platform !== 'win32' && sitemap()
]

更新集成

要同时更新所有官方集成，运行 @astrojs/upgrade 命令。它会把 Astro 和所有官方集成更新到最新版本。

自动更新

# 同时升级 Astro 和官方集成到最新版本
npx @astrojs/upgrade

# 同时升级 Astro 和官方集成到最新版本
pnpm dlx @astrojs/upgrade

# 同时升级 Astro 和官方集成到最新版本
yarn dlx @astrojs/upgrade

手动更新

要手动更新一个或多个集成，使用你的包管理器对应的命令。

# 示例：升级 React 和 Tailwind 集成
npm install @astrojs/react@latest @astrojs/tailwind@latest

# 示例：升级 React 和 Tailwind 集成
pnpm add @astrojs/react@latest @astrojs/tailwind@latest

# 示例：升级 React 和 Tailwind 集成
yarn add @astrojs/react@latest @astrojs/tailwind@latest

移除集成

要移除某个集成，首先从你的项目中卸载它

npm uninstall @astrojs/react

pnpm remove @astrojs/react

yarn remove @astrojs/react

接下来，从 astro.config.* 文件中移除该集成：

import { defineConfig } from 'astro/config';

import react from '@astrojs/react';

export default defineConfig({
  integrations: [
    react()
  ]
});

寻找更多集成

你可以在 Astro 集成目录中找到许多由社区开发的集成。点击链接查看详细的使用和配置说明。

构建自己的集成

Astro 的集成 API 受到 Rollup 和 Vite 的启发，其设计使任何曾经写过 Rollup 或 Vite 插件的人都感到熟悉。

查看集成 API，了解集成的作用以及如何自己编写一个集成。

Contribute

Community

添加集成

官方集成

Front-end frameworks

@astrojs/alpinejs

@astrojs/preact

@astrojs/react

@astrojs/solid⁠-⁠js

@astrojs/svelte

@astrojs/vue

SSR adapters

@astrojs/cloudflare

@astrojs/netlify

@astrojs/node

@astrojs/vercel

Other integrations

@astrojs/db

@astrojs/markdoc

@astrojs/mdx

@astrojs/partytown

@astrojs/sitemap

@astrojs/tailwind