如何在另一个项目中重用一个项目中的 AEM SPA 组件？

Question

如何在另一个 SPA 项目中重用一个 AEM SPA 项目的组件？假设此示例中的两个项目都使用带有 React 的 AEM Maven Archetype 25：

项目 A 在 ui.front-end 中有一个 header 组件，该组件在其 ui.apps.

下具有到 AEM 组件的正确映射

我如何在项目 B 中重用这个 header 组件？ header 组件似乎也需要存在于项目 B 中并导入到 imported-components.js 文件中才能工作。如果我想将项目 A 转换为 AEM SPA 组件库并在项目 B 中使用这些组件。我该如何进行这项工作？

Answer 1

If I wanted to instead turn project A into an AEM SPA component library and use those components in Project B.

你可以这样做 - 只需将 project-a 创建为常规 React 应用程序并从中导出组件，然后将其用作 project-b 中的依赖项（ui.frontend 部分您的 AEM 项目）并将这些 React 组件映射到它们的 AEM 对应组件。

这是来自 :

的示例组件

const Header = (props) => {
   return <h1>{props.title}</h1>
}

export default Header

然后在你的 project-b 中你会做这样的事情：

import {Header} from 'project-a'
import {MapTo} from '@adobe/aem-react-editable-components'
...

MapTo('my-aem-app/components/header')(Header)

How to reuse AEM SPA components from one project in another?