此文档说明了使用原型创建基于 React 框架的单页面应用程序 (SPA) 时,创建项目的详细信息。即在将 frontendModule
选项设置为 react
时。
使用 create-react-app 引导此项目。
构建此应用程序是为了使用网站的 AEM 模型。它会使用 @adobe/cq-react-editable-components 程序包的帮助程序组件自动生成布局。
在项目目录中,可以运行以下命令:
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:
npm test
此命令在交互式观察模式下启动测试运行程序。有关更多信息,请参阅有关运行测试的 React 文档。
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 模块文档。