跳转到内容

添加集成

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

集成可以……

  • 使用渲染器解锁 React、Vue、Svelte、Solid 和其他流行的 UI 框架。
  • 通过 SSR 适配器启用按需渲染。
  • 只需几行代码即可集成 MDX 和 Partytown 等工具。
  • 为你的项目添加新功能，例如自动生成站点地图。
  • 编写自定义代码，挂载到构建过程、开发服务器等。

官方集成

标题为“官方集成”的部分

以下集成由 Astro 官方维护。

前端框架

适配器

其他集成

自动设置集成

标题为“自动设置集成”的部分

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

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

终端窗口
npx astro add react

甚至可以同时添加多个集成！

终端窗口
npx astro add react sitemap 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. Imported from an installed npm package
        installedIntegration(),
        // 2. Imported from a local JS file
        localIntegration(),
        // 3. An inline object
        {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: [
  // Example: Customize your integration with function arguments
  sitemap({filter: true})
]

切换集成

标题为“切换集成”的部分

Falsy 值的集成会被忽略，因此你可以切换集成而不用担心留下的 undefined 和布尔值。

integrations: [
  // Example: Skip building a sitemap on Windows
  process.platform !== 'win32' && sitemap()
]

升级集成

标题为“升级集成”的部分

要一次性升级所有官方集成，请运行 @astrojs/upgrade 命令。这将把 Astro 和所有官方集成升级到最新版本。

自动升级

标题为“自动升级”的部分
终端窗口
# Upgrade Astro and official integrations together to latest
npx @astrojs/upgrade

手动升级

标题为“手动升级”的部分

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

终端窗口
# Example: upgrade React and Partytown integrations
npm install @astrojs/react@latest @astrojs/partytown@latest

移除集成

标题为“移除集成”的部分

  1. 要移除一个集成，首先从你的项目中卸载该集成。

    终端窗口
    npm uninstall @astrojs/react

  2. 接下来，从你的 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 参考，了解集成可以做什么以及如何自己编写一个集成。

贡献 社区 赞助