More detail about Bootstrap script tag
- Can I change the hard code ID?
- How are libraries specified in data-sap-ui-libs loaded by UI5 framework?
Can I change the hard code ID?
In SAP help the UI5 bootstrap logic is explained: Bootstrapping: Loading and Initializing SAPUI5 in HTML Pages.
However, I was asked by my colleague about one question: the script id below is hard coded. Can I change its id to any other value like HelloWorld?
The answer is yes. For example the id below still works.
In order to explain this behavior, we have to understand the UI5 bootstrap process in more detail.
How to find the starting point for research?
Perform global search with the hard coded key word “sap-ui-bootstrap”, set a break point on search result, line 14893 below.
Refresh the application and break point is triggered. Through the comment of the function we can know that it is responsible to parse the bootstrap script node we define in index.html to determine the resource root.
The logic of UI5 framework to determine whether a script tag is a “bootstrap” tag is done by three regular expression evaluation ( see variables reConfigurator, reBootScripts and reResources in below screenshot ).
Only if all the three evaluation fail, then framework will compare the script tag id with hard coded id “sap-ui-bootstrap” as last resort.
In my case, although I change the ID to “HelloWorld”, the second regular expression still succeed so resource root is successfully determined, no need to go the last ELSE-IF to compare the ID with hard coded value.
How are libraries specified in data-sap-ui-libs loaded by UI5 framework?
Another question is: I have specified all libraries I would like to use in attribute “data-sap-ui-libs” as pure string value, how is UI5 framework able to parse this string and loading library one by one?
Since the bootstrap script tag is successfully determined via regular expression, now its attribute are ready for parse.
The pure string value for libraries to be loaded is stored in oCfg.libs.
The code highlighted below parses the string and convert library name into an array: config.modules.
Those libraries are loaded by function loadLibrary in line 39294 one by one: