# @adobe/aem-core-cif-react-components 中文文档

规范地址：https://npmcn.com/package/%40adobe/aem-core-cif-react-components/

版本：2\.19\.2
npm 元数据更新时间：2026-10-05T14:49:10.785Z
中文译文更新时间：2026-11-06T11:59:08.551Z
软件包许可：Apache-2\.0

本文由上游 README 翻译，可能存在偏差，请结合原文核对 API、命令与配置。版权与许可归原作者所有。

原始 npm 页面：https://www.npmjs.com/package/%40adobe/aem-core-cif-react-components
原文对照：https://npmcn.com/package/%40adobe/aem-core-cif-react-components/?lang=original
项目主页：https://github.com/adobe/aem-core-cif-components#readme
源码仓库：https://github.com/adobe/aem-core-cif-components

## 关键信息（来自 npm 元数据）

- 包体积（解压后）：2.3 MB，250 个文件
- 模块格式：ESM + CJS
- TypeScript 类型：未声明
- Node.js 要求：\>=12
- 运行依赖：0 个
- peer 依赖：react ~17\.0\.1，graphql ~15\.7\.2，informed ~3\.29\.4，react-dom ~17\.0\.1，prop-types ^15\.7\.2，react-intl ~5\.20\.0，react-feather ^2\.0\.3，@apollo/client ^3\.1\.2，@magento/peregrine ^11\.0\.0 \|\| ~12\.5\.0，braintree-web-drop-in ^1\.22\.1
- 首次发布：2019-11-29T11:57:40.933Z
- 最新版本发布：2026-10-05T14:49:10.458Z
- 近 30 天下载量：3322（2026-10-05 至 2026-11-03，npm 官方下载统计）
- 已发布版本数：65（近 12 个月 9 个）

## 中文简介

AEM CIF 核心组件项目所使用的反应组件集合

## 安装

```sh
npm install @adobe/aem-core-cif-react-components
```

也可以使用：`pnpm add @adobe/aem-core-cif-react-components`、`yarn add @adobe/aem-core-cif-react-components`、`bun add @adobe/aem-core-cif-react-components`

## README

# CIF 核心组件 - 反应组件

React 组件项目是所有使用 CIF 核心组件构建的代码基础 [反应](https://reactjs.org/)。该库将显示以下组件:

## 减少捆绑大小

此软件包支持树摇动 —— 您的店面只捆绑您实际导入的组件 .

**已命名的进口** (建议):

```javascript
import { CommerceApp, Portal, ConfigContextProvider } from '@adobe/aem-core-cif-react-components';
```

**直接导入** 用于单个组件:

```javascript
import GiftCartOptions from '@adobe/aem-core-cif-react-components/dist/esm/components/GiftCardOptions';
```

路径 `dist/esm/` 镜像 `src/` 文件夹结构 .

**提示 :**

-   使用已命名的进口——避免 `import *` 或导入整个软件包
-   运行一个生产大楼(`webpack -p` 编号 : `npm run prod`)所以未使用的代码被删除
-   只导入您在每个页面中使用的组件
-   不需要更改网页包配置

## 折旧组件

以下推车、取出和账户组件被折旧.

| 类别 | 折旧 |
| --- | --- |
| 墨盒检出( C) | `Cart`, (中文(简体) ), `CartTrigger`, (中文(简体) ), `CartProvider`, (中文(简体) ), `CartInitializer`, (中文(简体) ), `useCartState`, (中文(简体) ), `CheckoutProvider` |
| 账户认证( A) | `AuthBar`, (中文(简体) ), `AccountContainer`, (中文(简体) ), `AddressBook`, (中文(简体) ), `ResetPassword`, (中文(简体) ), `MyAccount`, (中文(简体) ), `AccountLink`, (中文(简体) ), `AccountDetails`, (中文(简体) ), `UserContextProvider`, (中文(简体) ), `useUserContext` |
| 工具 | `Trigger` |

## 与购物车有关的部分

### 圆筒

实施"迷你卡"部分,完成取出经验.

### 盒提供器

提供国家管理推车业务的推车组件的背景

### 刻录器

一个提供"加到"和"从车中取出"等手推车业务的组件

### 检查

一个为报到业务提供国家管理的推车组件的背景提供者

## 与用户认证/账户管理有关的部分

### 奥特巴

账户管理组件 - 签名、 忘记密码、 更改密码和我的账户, 全部包在一个组件中

### 账户管理员

和AuthBar一样,但是在一个倒下而不是一个面板中实现的.

### 地址簿

一个允许经认证的购物者管理其地址簿的组件.

### 用户连接器

用户操作的上下文提供者 - 在 / 签出, 创建用户

## 一般用途构成部分

## 商务App

React 组件的便利包装, 封装所有运行应用程序所需的上下文

## 图表qlAuthLink

一个阿波罗林克实例,它处理某些图克l请求的授权(如:推车突变). 用于创建一个新的阿波罗克利特实例:

```javascript
import { ApolloClient, from, HttpLink, InMemoryCache } from '@apollo/client';
import { graphqlAuthLink } from '@adobe/aem-core-cif-react-components';

const client = new ApolloClient({
    link: from([graphqlAuthLink, new HttpLink({ uri: graphqlEndpoint, headers: { Store: storeView } })]),
    cache: new InMemoryCache()
});
```

### 门户

允许在门户网站内渲染回声树的组件。 用途 `ReactDOM.createPortal()` 在引擎盖下.

## 建设项目

工程使用命令构建 `npm run build`。构建进程将所有代码捆绑到一个放在其中的客户端库中 `../ui.apps/src/main/content/jcr_root/apps/core/cif/clientlibs/react-components/dist`。 。 。 .

## 测试组件

这个项目使用 [欢乐](https://jestjs.io/) 用于运行单元测试和 [反应测试库](https://testing-library.com/docs/react-testing-library/intro) 作为测试框架。 这个框架允许您测试组件的行为而不是执行.

单位测试使用 `npm run test` 命令。 要运行开发过程中的测试, 您可以使用 `npm run test:watch` 以监视模式启动 Jest.

## 发展

### 先决条件

为了发展,请 [节点.js](https://nodejs.org/) (v12+) 和 (v12+) 和 (v12+) 和 ) [无](https://www.npmjs.com/get-npm) (v6+)安装.

React 组件直接访问 Magento GraphQL 端点,所以所有调用必须要么从 AEM 相同的端点服务,要么通过添加 CORS 头的代理服务.

要启动本地代理服务器, 您可以使用以下命令 :

```
npx local-cors-proxy --proxyUrl https://my.magento.cloud --port 3002 --proxyPartial ''
```

然后在 `http://localhost:3002/graphql`。 。 。 .

如果您在 Prem 上为 AEM 安装开发, 将在我们的样本调度器配置中包含一个代理( 请参见 [解析器配置](https://npmcn.com/package/%40adobe/dispatcher) 详细情况请查阅。 您必须通过调度器访问 AEM( 即使用 https://localhost 而不是 http://localhost:4502).

### 大楼

要构建您可以使用的组件

```
npm run build
```

## 常见问题

### @adobe/aem-core-cif-react-components 是什么？

AEM CIF 核心组件项目所使用的反应组件集合

### 如何安装 @adobe/aem-core-cif-react-components？

在项目目录运行 npm install @adobe/aem-core-cif-react-components，或使用 pnpm add / yarn add / bun add。它还需要宿主项目提供 peer 依赖：react（~17\.0\.1）、graphql（~15\.7\.2）、informed（~3\.29\.4）、react-dom（~17\.0\.1）、prop-types（^15\.7\.2）、react-intl（~5\.20\.0）、react-feather（^2\.0\.3）、@apollo/client（^3\.1\.2）、@magento/peregrine（^11\.0\.0 \|\| ~12\.5\.0）、braintree-web-drop-in（^1\.22\.1）。npm 7 及以上与 pnpm 8 及以上默认会自动安装必需的 peer 依赖，Yarn 需要手动安装。

### @adobe/aem-core-cif-react-components 支持 TypeScript 吗？

该包的 package\.json 没有声明类型入口。需要类型提示时，可以在 npm 上查找社区维护的 @types/adobe\_\_aem-core-cif-react-components 是否存在。

### @adobe/aem-core-cif-react-components 支持 ESM 还是 CommonJS？

同时提供 ES Module 与 CommonJS 入口，import 和 require\(\) 都可以使用，打包工具会自动选择合适的版本。

### @adobe/aem-core-cif-react-components 需要什么版本的 Node\.js？

package\.json 的 engines 字段要求 Node\.js \>=12。版本不符时 npm 默认只给出警告，开启 engine-strict 后会拒绝安装。

### @adobe/aem-core-cif-react-components 可以商用吗？

@adobe/aem-core-cif-react-components 使用 Apache-2\.0 许可。宽松许可：允许商业使用、修改和再分发，并附带明确的专利授权；分发时需保留许可与 NOTICE 文件，修改过的文件要注明改动。以上为概括，不构成法律意见，请以许可原文为准。

### @adobe/aem-core-cif-react-components 的下载量有多少？

根据 npm 官方下载统计，@adobe/aem-core-cif-react-components 在 2026/10/05 – 2026/11/03 这 30 天内被下载 3,322 次，日均约 111 次。下载量会把 CI 构建、镜像同步和作为其他包依赖的安装一并计入，适合横向比较热度，不能直接等同于使用人数。

### @adobe/aem-core-cif-react-components 还在维护吗？

最新版本 2\.19\.2 发布于 2026/10/05（1 个月前）；至今共发布 65 个版本，其中过去 12 个月发布了 9 个；首次发布于 2019/11/29。发布频率只是参考信号：功能稳定的工具可能很少需要更新，建议结合源码仓库的 issue 和提交记录判断。