根据 AEM 中的浏览器有条件地包含不同的客户端库？

Question

是否可以根据浏览器的用户代理有条件地包含不同的客户端库？

IE
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.js @ categories='a'}"/>

Modern Browsers
<sly data-sly-use.clientLib="/libs/granite/sightly/templates/clientlib.html"
     data-sly-call="${clientlib.js @ categories='b'}"/>

AEM 版本：6.3

如果不是，还有什么其他替代方法可以达到同样的效果？

注意：我尝试在 sling rewriter 服务器端完成此检查，但问题是，在调度程序开启的情况下，它只会在最短时间内命中 AEM 并缓存 html，任何后续命中都不会调用任何服务器渲染它的侧面逻辑。因此，它必须在客户端 IMO 完成

Answer 1

为此，您必须编写自定义客户端库模板，如下所述：https://github.com/nateyolles/aem-clientlib-async。

然后在 WCMUse 类中，您可以检查用户代理并相应地包含客户端库。

Answer 2

首先，正如您已经正确指出的那样，您需要与调度程序缓存一起使用的解决方案。所以 Sightly 不是一个选择。

然后，关于这一事实，一方面，大多数 AEM 模板都有带有多个可能组件的段落系统要添加到页面中，而 AEM 客户端库是在模板级别（而不是页面级别）构建的，您最终会得到一个客户端库，大部分时间都包含 lots 未使用的 JS 和 CSS，因为您必须涵盖页面和段落系统中使用的组件的所有可能选项。 考虑到这一点，clientlibs 可能毕竟不是一个好的选择。

在您的 AEM 存储库中拥有静态 CSS 和 JS 文件并基于 JS sn-p 在客户端引用它们就可以解决问题，而且 - 在大多数情况下 - 您不会使用这种方法购买任何副作用。

Answer 3

您可以：

• 用条件 cmets 包装您的客户端库：https://stackoverflow.com/a/11703767
• 创建一个 Use-Object 来检查 User-Agent 标头并公开一个方法 isIE，您可以使用该方法有条件地包含带有 data-sly-test 的客户端库。或者，您的 Use-Object 可以根据用户代理返回正确的类别，这样您就可以只调用一个 clientlib。

Answer 4

您可以使用<script module> 和<script nomodule> 来实现这一点。第一个被旧浏览器忽略，第二个被现代浏览器忽略。类似于 Vue 的Modern Mode。检查：https://cli.vuejs.org/guide/browser-compatibility.html#modern-mode

您更有可能需要一些后端来创建您的自定义 clientlib 模板。