Question

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

工作情况下，选择“地图容器”控件的示例页面：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，请执行下一条命令：

StdConverter

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

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

我希望加载的外部js库应该可以通过用户界面中的任何控件进行访问。

Answer 1

来自SAPUI5 documentation：

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

不幸的是，SAPUI5图表使用另一个AMD加载器（RequireJS），因此您的模块date-fns将使用RequireJS加载，而全局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>

includeScript函数包含的外部JS库无法访问

1 个答案: