React SPA的前端内部版本

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

概述

此项目已通过create-react-app引导。

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

脚本

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

npm开始

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. 导航到配置管理器(http://localhost:4502/system/console/configMgr)
  2. 打开“AdobeGranite跨源资源共享策略”的配置
  3. 使用以下其他值创建新配置:
    • 允许的源:http://localhost:3000
    • 支持的标头:授权
    • 允许的方法:OPTIONS

npm测试

npm test

此命令在交互式监视模式下启动测试运行器。 有关更多信息,请参阅React文档中有关运行测试的信息。

npm运行生成

npm run build

此命令将生产应用程序构建到内部版本文件夹。 它在生产模式下捆绑了React,并优化了内部版本以获得最佳性能。 有关更多信息,请参阅React部署文档。

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

浏览器支持

默认情况下,此项目使用Browserslist的默认选项来标识目标浏览器。 此外,它还包含现代语言功能的填充,以支持旧版浏览器(例如Internet Explorer 11)。 如果不需要支持此类浏览器,则可以删除多填充依赖项和导入。

代码拆分

默认情况下, 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中解析,并且只将入口点文件捆绑到ClientLib中。 其余文件将放在ClientLib的资源目录中,并将动态请求,因此仅在实际需要时加载。

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

在此页面上