UI5 Tooling continues to evolve, and with the latest enhancement to the UI5 Builder, developers can now take even more control over how their projects are built. The feature we are excited to introduce is the Output Style, a powerful capability that allows you to get a more efficient and organized build output.
Understanding Output Style
In the UI5 world, projects (for example, libraries) come with namespaces that define a structured hierarchy. For instance, OpenUI5 features namespaces like "sap.m," "sap.f," and "sap.ui.core." Typically, when the bundler creates a build, it replicates this structure in the "resources" folder, leading to paths like "/resources/sap/m/RangeSlider.js."
With the Output Style feature, you have the flexibility to omit both this project namespace and the "resources" directory. Imagine "/resources/sap/m/RangeSlider.js" transforming into "./RangeSlider.js." This results in a flat build output.
Key Constraints and Considerations
Keep in mind that the Output Style only affects the root project’s build structure. In other words, if dependencies are included into the build bundle, they will be built with their respective Default Output Style. Check the table below for the different possible combinations:
Requested Output Style / Project Type |
Resulting Style |
Default |
|
application |
Root project is written Flat-style, dependencies in their respective Default-style |
library |
Root project is written Namespace-style, dependencies in their respective Default-style |
theme-library |
Root project is written in the style of the sources (multiple namespaces), dependencies in their respective Default-style |
module |
Root project is written with the configured paths,
dependencies in their respective Default-style |
Flat |
|
application |
Same as Default |
library |
Root project is written Flat-style (without its namespace, logging warnings for resources outside of it),
dependencies in their respective Default-style |
theme-library |
Unsupported, since a theme-library in most cases has more than one namespace |
module |
Unsupported, since modules have explicit path mappings configured and no namespace concept |
Namespace |
|
application |
Root project is written Namespace-style (resources are prefixed with the project's namespace),
dependencies are written in their respective Default-style |
library |
Same as Default |
theme-library |
Unsupported, since a theme-library in most cases has more than one namespace |
module |
Unsupported, since modules have explicit path mappings configured and no namespace concept |
Using Output Style with UI5 CLI
To harness the power of the Output Style feature, UI5 CLI (with version 3.8.0 and above) introduces a new option:
ui5 build --output-style=default | flat | namespace
Here are the possible values for --output-style:
- default: The default directory structure for every project type. For applications this is identical to "flat" and for libraries to "namespace". Other types have a more distinct default output style.
- flat: Omits the project namespace and the "resources" directory, resulting in a flat build.
- namespace: Respect the project namespace and the "resources" directory, maintaining the original structure.
For more detailed information and usage guidelines, refer to the official documentation: UI5 CLI - ui5 build
Migrating from ui5-task-flatten-library
Previously, achieving a flat build involved using the ui5-task-flatten-library custom task. However, with the integration of this functionality into UI5 Tooling, you are encouraged to migrate your code to the built-in solution. Here's how you can do it:
- Remove Custom Task: In your ui5.yaml file, remove the custom task for ui5-task-flatten-library:
builder:
customTasks:
- name: ui5-task-flatten-library
afterTask: generateResourcesJson
- Remove Dependency: Remove ui5-task-flatten-library from package.json.
- Update Build Command: When executing a "ui5 build" command, include the new option "--output-style=flat"
As the UI5 Tooling team continues to enhance and streamline the development experience, be sure to stay up to date with the latest features and best practices.
