Support for require / define with module name
Closed this issue · 3 comments
Hello.
Besides controller classes etc. we also have a "main" class that is not loaded bye the UI5 module loader framework, but basically with a <script> tag. (This is because we are developing a widget for sap analytics cloud - which includes our main JS file like this and instantiates the widgets as an HTML component.)
This is how the transpiled code looks like:
sap.ui.define([], function () {
...
/**
- @namespace ...
*/
class XYZWidget extends HTMLElement {
This is giving an error in the console:
Modules that use an anonymous define() call must be loaded with a require() call; they must not be executed via script tag or nested into other modules. All other usages will fail in future releases or when standard AMD loaders are used or when ui5loader runs in async mode. Now using substitute name anonymous1.js - sap.ui.ModuleSystem
While the generated define call is the same for controllers as well, controllers are "required" by other modules, and during this process the module system can determine the module name automatically - even if the module name is not specified explicitly in the define() call of the module itself.
I think for flexibility it would make sense to provide an option to control:
- Whether define or require is generated during transpilation
- The explicit module name to be used for the define()
Probably decorators on the default export could be used for that?
What do you think?
Best regards,
Oliver
I think you're mixing technologies and what you're trying to do is, at least in part, not a good idea.
Pragmatically, it you're writing UI5-flavoured JavaScript, your files should always be UI5 modules, which means they should always be wrapped in a sap.ui.define call. In other words, omitting the wrapper is never a good idea, and if you think that that's what you need to do, you should probably rethink your design.
Regarding explicit module naming: while that is supported, should work and could possibly be added to as a feature to the Babel plugin, I would consider it to be a crutch because you're using it to hide the fact that you're trying to load a UI5 module without using the UI5 module loader - when that is precisely what you should be doing.
Basically:
Don't load your UI5 module with <script src...>, but use sap.ui.require(["my/strange/classish/Thing"], Thing => { Thing.sayHello(); }); at any point after you have initialized the UI5 Core. 😄
Thanks for your comment.
I am writing a non-UI5 class - an HTML custom element. This is loaded in a non-UI5 manner, and I have no control over how it is loaded.
This HTML custom element then embeds a UI5 view.
So maybe the simplest solution would be to skip the transpilation for this particular file.
I was trying to exclude the file, but it is not possible to do this on the level of the babel preset (but I still want my other presets to run). Probably I will have to set up to separate babel build step, with two different config files. One for the UI5 resources, and one for the non-UI5 part.