Нужно создать пользовательский элемент управления UI5, которому нужны некоторые другие модули AMD

Question

Мне нужно создать элемент управления coustom UI5, где мне нужно загрузить карту ESRI.

sap.ui.define([ 
"sap/ui/core/Control" 
], function (Control) { 
"use strict"; 
return Control.extend("custom.map.ESRIMap", { 
    init : function(){ 
     this._map = new Map('mapDiv',esriMapOptions); 
    } 
}); 
}); 

Вот как я хочу написать свой пользовательский контроль.

Где я загрузил ESRI JavaScript API, как

jQuery.sap.includeScript({ 
        url : "https://js.arcgis.com/3.18/init.js", 
        id : 'esriApi' 
       }); 

Проблема я облицовкой ESRI загрузки библиотеки, если я загружаю, как показано ниже,

sap.ui.define([ 
    "sap/ui/core/Control" 
    "esri/map 
    ], function (Control,Map) { 

Это не будет загружаться, потому что его не ui5 модуль

я должен требуют, как показано ниже

require(["esri/map"],function(Map){ 

Мне нужна помощь в написании пользовательского элемента управления UI5 или модуля, где мне нужно загрузить модуль UI5 и модуль ESRI AMD, прежде чем вернуть первый код.

Answer 1

Вообще говоря, большинство загрузчиков модулей AMD не поддерживают синтаксис плагина Dojo AMD (например: dojo/i18n), используемый API ArcGIS для JavaScript. Поэтому единственным надежным способом загрузки этих модулей является использование Dojo's require(), как вы упомянули выше.

При использовании других загрузчиков модулей мы часто используем шаблоны «вложенные требования». В вашем случае это будет выглядеть примерно так:

sap.ui.define([ 
    "sap/ui/core/Control" 
], function (Control) { 
    "use strict"; 
    return Control.extend("custom.map.ESRIMap", { 
     init : function() { 
     require(["esri/map"],function(Map){ 
      // now you have access to Control and Map 
      this._map = new Map('mapDiv',esriMapOptions); 
     }); 
     } 
    }); 
}); 

Имейте в виду, что require() является асинхронной и, по всей вероятности, будет приводить к сети запросов для извлечения модулей сценариев. Я ничего не знаю об инфраструктуре UI5 и независимо от того, следует ли делать такие запросы aync в элемента управления. Если нет, вам может потребоваться найти другое место для требования.

Этот шаблон описан более подробно in this blog post, который ссылается на другие примеры того, как он используется в приложениях React and Angular. Возможно, вы также сможете использовать esri-loader, который просто предоставляет API, чтобы скрыть использование глобального require().