@astrojs/preact

这个 Astro 集成 可以为你的 Preact 组件提供服务器端渲染和客户端水合（hydration）功能。

Preact 是一个允许你构建适用于网络的交互式 UI 组件的库。如果你想使用 JavaScript 在你的网站上构建交互式功能，你可能更喜欢使用它的组件格式，而不是直接使用浏览器的 API。

如果你之前使用过 React，Preact 也是一个很好的选择。Preact 提供与 React 相同的 API，但打包体积更小，仅为 3kB。它甚至支持通过 compat 配置选项来渲染许多 React 组件（见下文）。

在使用这个集成之前，想要了解更多关于 Preact 的信息吗？
可以查看他们网站上的 “在 10 分钟内学习 Preact” 互动教程。

astro add 命令行工具可以自动化为你安装。在新的终端窗口中运行以下命令之一。（如果你不确定你正在使用哪个包管理器，运行第一个命令。）然后，按照提示操作，在终端中输入 “y”（表示 “yes”）来确认每一个步骤。

# 使用 NPM
npx astro add preact
# 使用 Yarn
yarn astro add preact
# 使用 PNPM
pnpm astro add preact

如果遇到任何问题，请随时在 GitHub 留言 并尝试以下的手动安装步骤。

首先，使用你的包管理器安装 @astrojs/preact包。如果你使用的是 npm 或者不确定，可以在终端中运行以下命令：

npm install @astrojs/preact

大多数包管理器会一并安装相关的 peer 依赖。然而，如果在启动 Astro 时看到”找不到包 preact “（或类似）的警告，你将需要安装 Preact：

npm install preact

然后，将这个集成应用到你的 astro.config.* 文件中，使用 integrations 属性：

import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';

export default defineConfig({
  // ...
  integrations: [preact()],
});

要在 Astro 中使用你的第一个 Preact 组件，请前往我们的 UI 框架文档。你将会了解到：

• 📦 如何加载框架组件
• 💧 客户端水合选项
• 🤝 将不同框架混合和嵌套在一起的机会

还可以查阅我们的 Astro 集成文档 以获取更多关于集成的信息。

Astro Preact 集成处理了 Preact 组件的渲染，并具有自己的选项。你可以在 astro.config.mjs 文件中修改这些选项，这是你的项目集成设置所在的地方。

对于基本用法，你无需配置 Preact 集成。

你可以启用 preact/compat，这是 Preact 的兼容层，用于在不需要安装或将 React 的较大库发送到用户的网络浏览器的情况下渲染 React 组件。

要实现这一点，向 Preact 集成传递一个对象，并设置 compat: true。

import { defineConfig } from 'astro/config';
import preact from '@astrojs/preact';

export default defineConfig({
  integrations: [preact({ compat: true })],
});

当启用了 compat 选项后，Preact 集成将会在你的项目中渲染 React 组件和 Preact 组件，同时还允许你在 Preact 组件中导入 React 组件。在 Preact 网站的“从 React 切换到 Preact”页面中可以阅读更多信息。

当导入 React 组件库时，为了将 react 和 react-dom 的依赖替换为 preact/compat, 你可以使 overrides 来实现。

{
  "overrides": {
    "react": "npm:@preact/compat@latest",
    "react-dom": "npm:@preact/compat@latest"
  }
}

可以查阅pnpm overrides 和 yarn resolutions 的文档，了解它们各自的覆盖功能。

• 在 Astro Preact 示例 中展示了如何在 Astro 项目中使用交互式的 Preact 组件。
• 在 Astro Nanostores 示例 中展示了如何在 Astro 项目中在不同组件之间共享状态，甚至可以跨不同框架共享状态。

如果需要帮助，请访问 Discord 上的 #support 频道。我们友好的支持团队成员将在那里帮助你！

你也可以查阅 Astro 集成文档 获得更多集成信息。

这个包由 Astro 的核心团队维护。欢迎你提交 issue 或 PR!

查看 CHANGELOG.md 了解此集成的更改历史。

更多集成