使用 AEM 项目原型进行前端开发 front-end

AEM 项目原型包括一个可选的基于 Webpack 的专用前端构建机制。因此，ui.frontend 模块成为了项目的所有前端资源（包括 JavaScript 和 CSS 文件）的中心位置。要充分利用这项有用且灵活的功能，请务必了解前端开发如何适应 AEM 项目。

本文档重点介绍前端构建模块的一般使用模式及其为您提供的功能。有关详细的构建选项和技术说明，请参阅原型的 GitHub 存储库中的文档。

AEM 前端和后端开发 front-end-back-end

简单来说，可以将 AEM 项目视为由两个独立但相关的部分组成：

由于后端开发过程和前端开发过程各自专注于项目的不同部分，因此两者可以同时进行。

但是，任何生成的项目都需要使用这两种开发工作（即后端开发和前端开发）的输出。

确定标记 determining-markup

无论您决定为项目实施哪种前端开发工作流，后端开发人员和前端开发人员都必须首先共同确定标记。通常，AEM 定义由核心组件提供的标记。但如有必要，可以自定义标记。

可能的前端开发工作流 possible-workflows

前端构建模块是一个有用且非常灵活的工具，但并未提供其使用方式的详细说明。以下是两个​ 可能 ​的用法示例，但您的各个项目需求可能会指示其他使用模型。

使用 Webpack 静态开发服务器 using-webpack

利用 Webpack，您可以基于 ui.frontend 模块中的 AEM 网页的静态输出进行样式设置和开发。

在此流程中，AEM 开发人员可以执行前两个步骤，并将静态 HTML 传递给基于 AEM HTML 输出进行开发的前端开发人员。

使用 Storybook using-storybook

利用 Storybook，您可以执行更多原子前端开发。虽然 Storybook 未包含在 AEM 项目原型中，但您可以安装它并将您的 Storybook 构件存储在 ui.frontend 模块中。准备好在 AEM 中进行测试时，可以通过运行 npm run dev 将它们部署为 Clientlib。

Clientlib 概述 clientlibs

可使用 AEM Clientlib 构建前端模块。。在执行 NPM 构建脚本时，将构建应用程序，并且 aem-clientlib-generator 包会获取生成的构建输出并将其转换为此类 Clientlib。

Clientlib 将包含以下文件和目录：