跳转到内容
Astro Astro

使用集成

使用 Astro 集成只需几行代码就能为你的项目添加新的功能和行为。你可以自己编写一个自定义的集成，可以使用官方集成，还可以使用社区内的集成。

集成能够…

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

官方集成

段落标题 官方集成

UI 框架

SSR 适配器

其他

自动集成设置

段落标题 自动集成设置

使用 Astro 的 astro add 命令来自动设置集成。

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

Terminal window
npx astro add react

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

Terminal window
npx astro add react tailwind partytown

使用集成

段落标题 使用集成

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

有三种常见的方法来导入集成到你的 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参考资料，了解所有不同的集成编写方式。

自定义选项

段落标题 自定义选项

集成几乎都是以工厂函数的形式编写的，并返回真实的集成对象。这使得你可以通过向工厂函数传递参数和选项定制集成。

integrations: [
  // 示例：用函数参数来定制你的集成
  sitemap({filter: true})
]

切换集成

段落标题 切换集成

你可以切换集成启用状态，而不用担心遗留的 undefined 和布尔值问题，Astro 会自动忽略假值的集成。

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

移除集成

段落标题 移除集成

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

Terminal window
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 集成目录中找到许多由社区开发的集成。点击链接查看详细的使用和配置说明。

构建自己的集成

段落标题 构建自己的集成

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

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