React SPA 的前端构建

上次更新: 2023-05-21
  • 创建对象:
  • Developer
    Admin

此文档说明了使用原型创建基于 React 框架的单页面应用程序 (SPA) 时,创建项目的详细信息。即在将 frontendModule 选项设置为 react 时。

概述

使用 create-react-app 引导此项目。

构建此应用程序是为了使用网站的 AEM 模型。它会使用 @adobe/cq-react-editable-components 程序包的帮助程序组件自动生成布局。

脚本

在项目目录中,可以运行以下命令:

npm start

npm start

此命令通过从在 http://localhost:4502 运行的本地 AEM 实例代理 JSON 模型,在开发模式下运行应用程序。这假定整个项目已至少部署到 AEM 一次(项目根中的 mvn clean install -PautoInstallPackage)。

ui.frontend 目录中运行 npm start 之后,应用程序将自动在浏览器中打开(位于路径 http://localhost:3000/content/<appId>/<country>/<language>/home.html)。如果进行编辑,页面将重新加载。

如果您收到了与 CORS 相关的错误,可能需要如下所示配置 AEM:

  1. 导航到 Configuration Manager (http://localhost:4502/system/console/configMgr)
  2. 打开“Adobe Granite 跨源资源共享策略”的配置
  3. 使用以下其他值创建新配置:
    • 允许的源:http://localhost:3000
    • 支持的标头:Authorization
    • 允许的方法:OPTIONS

npm test

npm test

此命令在交互式观察模式下启动测试运行程序。有关更多信息,请参阅有关运行测试的 React 文档

npm run build

npm run build

此命令在构建文件夹中构建用于生产的应用程序。它在生产模式下捆绑 React,并优化构建以实现最佳性能。有关更多信息,请参阅有关部署的 React 文档

此外,使用 aem-clientlib-generator 程序包从应用程序生成了 AEM ClientLib。

浏览器支持

默认情况下,此项目使用 Browserslist 的默认选项来标识目标浏览器。此外,它包括用于现代语言功能的 polyfill 以支持较早的浏览器(例如,Internet Explorer 11)。如果不需要支持这些浏览器,可以删除 polyfill 依赖关系和导入。

代码拆分

React 应用程序配置为默认使用代码拆分。在为生产构建应用程序时,代码将输出为多个块:

$ ls build/static/js
2.5b77f553.chunk.js
2.5b77f553.chunk.js.map
main.cff1a559.chunk.js
main.cff1a559.chunk.js.map
runtime~main.a8a9905a.js
runtime~main.a8a9905a.js.map

只有在需要时才加载块可以显著提升应用程序性能。

要使此功能可用于 AEM,应用程序需要能够识别应该从 AEM 生成的 HTML 请求哪些 JS 和 CSS 文件。在 asset-manifest.json 文件中使用“entrypoints”键可以做到这一点。此文件在 clientlib.config.js 中解析,只有 entrypoint 文件捆绑到 ClientLib。剩余的文件在 ClientLib 资源目录中替换并且动态请求,因此仅在实际需要这些文件时才加载。

有关项目原型如何使用 AEM ClientLibs 的更多信息,请参阅常规 ui.frontend 模块文档

在此页面上