sapui5 - includeScript 函数包含的外部 JS 库不可访问

Question

我尝试在加载 UI5 页面后测试 includeScript 函数以加载外部 js 库。它在脚本加载后的所有情况下都有效，它是可访问的。但是，如果有 ChartContainer 控件，则无法访问加载的 JS 库。

• 工作案例，选择 Map Container 控件的示例页面：https://sapui5.hana.ondemand.com/#/entity/sap.ui.vk.MapContainer/sample/sap.ui.vk.sample.MapContainerBasic，在页面之后加载完毕，打开开发者工具，在控制台面板中运行下面的脚本。

var includeScript = sap.ui.require("sap/ui/dom/includeScript");
try {
  dateFns.isToday(new Date());
} catch (err) {
  new Promise(function(fnResolve, fnReject) {
    includeScript(
          "https://cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.min.js", 
          "datefns_js", fnResolve, fnReject);
	}).then(function() {
     console.log("datefns_js is loaded!!!")
     console.log(dateFns.isToday(new Date()));
	});
}
<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"></script>

加载 dateFns 后，执行下一个命令：

dateFns.isToday(新日期());

它在控制台中返回 true，因为 dateFns js 已加载并可访问。

• 无工作情况，特别是在测试 ChartContainer 控件时，在新会话中打开图表容器控件的示例页面：https ://sapui5.hana.ondemand.com/#/entity/sap.suite.ui.commons.ChartContainer/sample/ sap.suite.ui.commons.sample.ChartContainerSimpleToolbar 打开开发者工具，重复上述步骤。由于库已加载但无法访问，因此错误发生为“未捕获的 ReferenceError：未定义 dateFns”。

我希望加载的外部 js 库应该可以通过我的 UI 中的任何控件访问。

标签： sapui5

Answer 1

从SAPUI5 文档：

可以加载使用统一模块定义 (UMD) 语法的模块，但仅当不存在 AMD 加载器或它们将其导出也暴露给全局命名空间时，即使存在 AMD 加载器也是如此

不幸的是，SAPUI5 图表使用另一个 AMD 加载器 ( RequireJS)，因此您的模块将使用 RequireJS 加载，并且对全局对象date-fns不可用。window

要解决此问题，您可以强制模块始终通过 RequireJS 加载，然后通过以下require方法可用：

<script src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"></script>

<script>
var declareLibs = new Promise(function (resolve, reject) {
    sap.ui.require(["sap/ui/thirdparty/require"], function () {
        requirejs.config({
            paths: {
                "date_fns": ["//cdnjs.cloudflare.com/ajax/libs/date-fns/1.30.1/date_fns.min"]
            }
        });

        resolve();
    });
});

declareLibs.then(require(["date_fns"], function (dateFns) {
    console.log("datefns_js is loaded!")
    console.log(dateFns.isToday(new Date()));
}));
</script>