Map directories/files to node_modules

[nam-truong-le]

Expected Behavior

Normally we have dependencies (like js-yaml, c3js,...) installed in node_modules. It should be possible to define kind of mapping:

"my/library/thirdparty/ext.min.js": "node_modules/ext/dist/ext.min.js"

This mapping setting should be used in "ui5 serve" & "ui5 build".

Current Behavior

It's only possible to define mapping to the src, test and webapp directories.

Steps to reproduce the issue

Context

Affected components (if known)

• [x] ui5-builder
• [x] ui5-server
• [ ] ui5-cli
• [ ] ui5-fs
• [x] ui5-project
• [ ] ui5-logger

Log Output / Stack Trace

[RandomByte]

Hey @truongln88,

If I get you right, this might already be possible using project shims.

Example setup: https://github.com/Michadelic/openui5-parallax/pull/2

[nam-truong-le]

Hi @RandomByte,

thank you for the suggestion. I tried it and it works, but only for directory. Can we also map files?

Let's assume we have thirdparty libraries:

node_modules/library_a/dist/a.js
node_modules/library_b/dist/b.js

I would like to have a way to map them to

resources/path/to/library/thirdparty/a.js
resources/path/to/library/thirdparty/b.js

With directory mapping, I could only make this:

resources/path/to/library/thirdparty/a/a.js
resources/path/to/library/thirdparty/b/b.js

[nam-truong-le]

And, if we map a dist folder, we have no control over which files to be taken.

[RandomByte]

To follow up on this: No, mapping files is not yet possible. This might be an enhancement in the future.

However, your use case should already work by mapping both dist directories to /resources/path/to/library/thirdparty/. There can be multiple libraries mapped to the same path. Resources will be found in both. If both modules contain a resource with the same name, the one that will be found first will be used. This might differ depending on the environment, so always make sure that resource names are unique when mapping two modules to the same path.

By the way, the final project shim documentation is available here: https://github.com/SAP/ui5-project/blob/master/docs/Configuration.md#project-shims

[sven-petersen]

+1 on this feature. I want to use highcharts in a library. Unfortunately they have a different folder structure (which you can see here) where the main library file is on root level. So there mapping has to point to ./. However this brakes the build as the builder also processes all subfolders and the ./es-modules-folder contains .js files that cannot be processed (see and example error below). And all I need is actually just a single js-file from the highcharts library. So even if the processing of the files wouldn't fail I don't want it to include them in the build.

ERR! lbt:resources:ResourcePool    'Error: Line 335: Unexpected token\n
    at ErrorHandler.constructError ([...]/ui/node_modules/esprima/dist/esprima.js:5012:22)\n
    at ErrorHandler.createError ([...]/ui/node_modules/esprima/dist/esprima.js:5028:27)\n
    at Parser.unexpectedTokenError ([...]/ui/node_modules/esprima/dist/esprima.js:1985:39)\n
    at Parser.tolerateUnexpectedToken ([...]/ui/node_modules/esprima/dist/esprima.js:1998:42)\n
    at Parser.parseStatementListItem ([...]/ui/node_modules/esprima/dist/esprima.js:3371:31)\n
    at Parser.parseScript ([...]/ui/node_modules/esprima/dist/esprima.js:4723:29)\n
    at parse ([...]/ui/node_modules/esprima/dist/esprima.js:122:61)\n
    at Object.parseScript ([...]/ui/node_modules/esprima/dist/esprima.js:145:13)\n
    at determineDependencyInfo ([...]/ui/node_modules/@ui5/builder/lib/lbt/resources/ResourcePool.js:77:25)\n
    at process._tickCallback (internal/process/next_tick.js:68:7)' }
ERR! lbt:resources:ResourcePool Error: Line 188: Unexpected token
ERR! lbt:resources:ResourcePool     at ErrorHandler.constructError ([...]/ui/node_modules/esprima/dist/esprima.js:5012:22)
ERR! lbt:resources:ResourcePool     at ErrorHandler.createError ([...]/ui/node_modules/esprima/dist/esprima.js:5028:27)
ERR! lbt:resources:ResourcePool     at Parser.unexpectedTokenError ([...]/ui/node_modules/esprima/dist/esprima.js:1985:39)
ERR! lbt:resources:ResourcePool     at Parser.tolerateUnexpectedToken ([...]/ui/node_modules/esprima/dist/esprima.js:1998:42)
ERR! lbt:resources:ResourcePool     at Parser.parseStatementListItem ([...]/ui/node_modules/esprima/dist/esprima.js:3371:31)
ERR! lbt:resources:ResourcePool     at Parser.parseScript ([...]/ui/node_modules/esprima/dist/esprima.js:4723:29)
ERR! lbt:resources:ResourcePool     at parse ([...]/ui/node_modules/esprima/dist/esprima.js:122:61)
ERR! lbt:resources:ResourcePool     at Object.parseScript ([...]/ui/node_modules/esprima/dist/esprima.js:145:13)
ERR! lbt:resources:ResourcePool     at determineDependencyInfo ([...]/ui/node_modules/@ui5/builder/lib/lbt/resources/ResourcePool.js:77:25)
ERR! lbt:resources:ResourcePool     at process._tickCallback (internal/process/next_tick.js:68:7)
ERR! lbt:resources:ResourcePool  failed to parse or analyze %s: com/sap/de/ui/controls/thirdparty/highcharts/es-modules/parts/Axis.js { Error: Line 188: Unexpected token
ERR! lbt:resources:ResourcePool     at ErrorHandler.constructError ([...]/ui/node_modules/esprima/dist/esprima.js:5012:22)
ERR! lbt:resources:ResourcePool     at ErrorHandler.createError ([...]/ui/node_modules/esprima/dist/esprima.js:5028:27)
ERR! lbt:resources:ResourcePool     at Parser.unexpectedTokenError ([...]/ui/node_modules/esprima/dist/esprima.js:1985:39)
ERR! lbt:resources:ResourcePool     at Parser.tolerateUnexpectedToken ([...]/ui/node_modules/esprima/dist/esprima.js:1998:42)
ERR! lbt:resources:ResourcePool     at Parser.parseStatementListItem ([...]/ui/node_modules/esprima/dist/esprima.js:3371:31)
ERR! lbt:resources:ResourcePool     at Parser.parseScript ([...]/ui/node_modules/esprima/dist/esprima.js:4723:29)
ERR! lbt:resources:ResourcePool     at parse ([...]/ui/node_modules/esprima/dist/esprima.js:122:61)
ERR! lbt:resources:ResourcePool     at Object.parseScript ([...]/ui/node_modules/esprima/dist/esprima.js:145:13)
ERR! lbt:resources:ResourcePool     at determineDependencyInfo ([...]/ui/node_modules/@ui5/builder/lib/lbt/resources/ResourcePool.js:77:25)
ERR! lbt:resources:ResourcePool     at process._tickCallback (internal/process/next_tick.js:68:7)

if someone elese stumbles across this issue and there is no better fix yet: I am using patch-package in order to automatically delete all files except for the ones I need. Not nice but it works. Hope this is not yet another of those permanent "temporary workarounds".

[RandomByte]

@aktivalux I guess an exclude configuration as discussed here could already help. However I see that the per-file mapping would be more useful in this case.