search

ui5-community / ui5-ecosystem-showcase

A repository showcasing the UI5 tooling extensibility to combine OSS tools for UI5 application development.
https://ui5-community.github.io/ui5-ecosystem-showcase/
Other
191 stars 92 forks source link

[ui5-tooling-modules] How to include JS/TS file without using global #1031

Closed swayongshen closed 1 month ago

swayongshen commented 2 months ago

May not be specifically for ui5-tooling-modules, but let's say we have a file file.ts (ESModule) that we want to reference in our controller code, since its not written in UI5 AMD style, the default import as follows will result in an undefined variable File

import File from './file.';

An alternative would be to assign the export from file.ts to the global window but that seems to be bad practice.

file.ts

const exports = {
  example: () => console.log('hi'),
}
export default exports;
window.file = exports;

controller.ts

import File from './file.';
const _ = File; // File needs to have a usage to be loaded by UI5;
window.file.example(); // Prints hello world

Since your team manages to load ESModule packages from NPM, I'm wondering if you have any expertise on making local ESModule files work the same way?

swayongshen commented 1 month ago

For anyone that is interested, use ui5-tooling-transpile and include js files under filePattern.

petermuessig commented 1 month ago

Hi @swayongshen,

sorry for not replying earlier. Seems that you found the filePattern configuration property. There you can specify any additional file extension which should be handled by the tooling extension. By default it is .+(js|jsx) for JS projects and .+(ts|tsx) for TS projects. If needed it can be overruled like shown in the following ui5.yaml: https://github.com/ui5-community/ui5-ecosystem-showcase/blob/main/showcases/ui5-tsapp/ui5.yaml#L12 even a bit more advanced using YAML anchors and reuse the config for the task and the middleware.