AEM Project Archetype包括一个可选的、基于Webpack的专用前端构建机制。 因此,ui.frontend模块成为项目所有前端资源(包括JavaScript和CSS文件)的中心位置。 要充分利用这一有用、灵活的功能,必须了解前端开发如何适合AEM项目。
用极为简化的术语来说,AEM项目可以认为是由两个单独但相关的部分组成的:
由于这两个开发过程都集中在项目的不同部分,因此后端和前端开发可以并行进行。
但是,任何最终的项目都需要同时使用这些开发工作的产出,即后端和前端。
运行npm run dev
将开始前端构建过程,该过程收集存储在ui.frontend模块中的JavaScript和CSS文件,并生成两个名为clientlib-site
和clientlib-dependencies
的精简客户端库或ClientLib,并将它们放入ui.apps模块中。 ClientLib可部署到AEM并允许您将客户端代码存储在存储库中。
使用mvn clean install -PautoInstallPackage
运行整个AEM项目原型时,包括ClientLib在内的所有项目对象都会推送到AEM实例。
进一步了解AEM如何在AEM开发文档中处理ClientLibs,如何将它们包含在中,或参见下面的ui.frontend模块如何使用它们。
前端模块使用AEM ClientLib可用。 执行NPM构建脚本时,将构建应用程序,aem-clientlib-generator包将获得的构建输出并将其转换为此类ClientLib。
ClientLib将包含以下文件和目录:
css/
:可在HTML中请求的CSS文件css.txt
:告诉AEM文件的顺序和名称, css/
以便合并它们js/
:可在HTML中请求的JavaScript文件js.txt
告诉AEM文件的顺序和名称, js/
以便合并它们resources/
:源映射、非入口点代码块(由代码拆分产生)、静态资产(例如图标)等。前端构建模块是一个实用且非常灵活的工具,但并未对它的使用方式提出任何具体意见。 以下是可能的使用情况的两个示例,但您的单个项目需要可能决定其他使用模式。
使用Webpack,您可以根据ui.frontend模块中AEM网页的静态输出进行样式设计和开发。
wcmmode=disabled
npm run dev
以生成ClientLib在此流程中,AEM开发人员可以执行步骤一和步骤二,并将静态HTML传递给基于AEM HTML输出进行开发的前端开发人员。
您还可以利用组件库捕获每个组件的标记输出样本,以便在组件级别而不是页面级别工作。
使用Storybook,您可以执行更多原子前端开发。 尽管AEM Project Archetype中不包含Storybook,但您可以安装它,并在ui.frontend模块中存储Storybook对象。 准备好在AEM中进行测试后,可以通过运行npm run dev
将其部署为ClientLibs。
aem Project Archetype中不包含Storybook。如果选择使用它,则必须单独安装它。
无论您决定为您的项目实施哪个前端开发工作流程,后端开发人员和前端开发人员都必须首先同意该标记。 通常,AEM定义由核心组件提供的标记。 但是,如有必要,可以自定义此项。
AEM Project Archetype包括基于Webpack的可选专用前端构建机制,该机制具有以下功能。
/clientlib/js
、/clientlib/css
或/clientlib/scss
下.content.xml
或js.txt
/css.txt
文件。/component/
文件夹下的所有JS文件。
sites.js
和vendors.js
)被拉入。/clientlib-site
中的输出文件site.js
和site.css
以及/clientlib-dependencies
中的dependencies.js
和dependencies.css
有关ui.frontend模块的更多技术信息,请参阅GitHub](https://github.com/adobe/aem-project-archetype/blob/master/src/main/archetype/ui.frontend.general/README.md)上的[文档。
npm install
。必须具有运行带有选项-DoptionIncludeFrontendModule=y
的原型来填充ui.frontend文件夹。
以下npm脚本驱动前端工作流:
npm run dev
-禁用JS优化(树摇动等)和源映射并禁用CSS优化的完整构建。npm run prod
-在启用JS优化(树摇动等)、禁用源映射和启用CSS优化的情况下实现完整构建。npm run start
-开始静态webpack开发服务器进行本地开发,并且只依赖AEM。ui.frontend模块编译ui.frontend/src
文件夹下的代码,并输出已编译的CSS和JS以及名为ui.frontend/dist
的文件夹下的任何资源。
site.js
及布局相 site.css
关图像和字体的文件夹都在clientlib-site resources/
dist/
文件夹中创建。dependencies.js
并 dependencies.css
在文件夹中 dist/clientlib-dependencies
创建。前端构建选项利用共享公共配置文件的仅开发和仅生产Webpack配置文件。 这样,可以单独修改开发和生产设置。
ui.frontend模块构建过程利用aem-clientlib-generator插件将编译的CSS、JS和任何资源移入ui.apps模块。 aem-clientlib-generator配置在clientlib.config.js
中定义。 将生成以下客户端库:
ui.apps/src/main/content/jcr_root/apps/<app>/clientlibs/clientlib-site
ui.apps/src/main/content/jcr_root/apps/<app>/clientlibs/clientlib-dependencies
clientlib-site
和 clientlib-dependencies
类别通过页面策略配 置 作为默认模板的一部分包含在页面上。要视图策略,请编辑内容页面模板>页面信息>页面策略。
站点页面中最终包含的客户端库如下:
<HTML>
<head>
<link rel="stylesheet" href="clientlib-base.css" type="text/css">
<script type="text/javascript" src="clientlib-dependencies.js"></script>
<link rel="stylesheet" href="clientlib-dependencies.css" type="text/css">
<link rel="stylesheet" href="clientlib-site.css" type="text/css">
</head>
<body>
....
<script type="text/javascript" src="clientlib-site.js"></script>
<script type="text/javascript" src="clientlib-base.js"></script>
</body>
</HTML>
当然,可以通过更新页面策略和/或修改各个客户端库的类别和嵌入属性来修改上述包含内容。
ui.frontend模块包含一个webpack-dev-server,它提供实时重装,以便在AEM之外进行快速前端开发。 安装程序利用html-webpack-plugin自动将从ui.frontend模块编译的CSS和JS注入静态HTML模板。
ui.frontend/webpack.dev.js
ui.frontend/src/main/webpack/static/index.html
ui.frontend/webpack.dev.js
中的配置运行的本地AEM实例。mvn -PautoInstallSinglePackage clean install
,将整个项目安装到运行于localhost:4502
的AEM实例。ui.frontend
文件夹内导航。npm run start
以开始webpack dev服务器。 启动后,应打开浏览器(localhost:8080
或下一个可用端口)。您现在可以修改CSS、JS、SCSS和TS文件,并立即查看Webpack开发服务器中反映的更改。