Include external file (node_modules) in library-preload

[StErMi]

Hi, I'm trying to include external files from my node_modules to build the library-preload.js My actual Gruntfile.js is like this:

module.exports = function(grunt) {

    grunt.initConfig({

        dir: {
            src: 'src',
            src_thirdparty: 'node_modules/qrcode-generator',
            dest: 'dist',
        },

        copy: {

        },

        clean: {
            dist: '<%= dir.dest %>/**'
        },

        openui5_preload: {
            library: {
                options: {
                    resources: [
                        {
                            cwd: '<%= dir.src_thirdparty %>',
                            src: '**/qrcode.js'
                        },
                        '<%= dir.src %>'
                    ],
                    dest: '<%= dir.dest %>',
                    compatVersion: '1.44',
                    compress: false
                },
                libraries: 'it/designfuture/qrcode'
            }
        }
    });

    // These publins provide necessary tasks
    grunt.loadNpmTasks('grunt-contrib-clean');
    grunt.loadNpmTasks('grunt-contrib-copy');
    grunt.loadNpmTasks('grunt-openui5');

    // Build task
    grunt.registerTask('build', ['openui5_preload']);

    // Default task
    grunt.registerTask('default', ['clean', 'build']);

};

it get aborted with this error:

Warning: No "library.js" found for pattern "it/designfuture/qrcode"! Use --force to continue.

Is there a way to do what I want to achieve?

[matz3]

You should be able to provide a resources configuration which maps the script in node_modules/qrcode-generator/qrcode.js to the namespace of your library: it/designfuture/qrcode/3rdparty, like this:

openui5_preload: {
    library: {
        options: {
            resources: [
                { cwd: '<%= dir.src %>' },
                {
                    cwd: 'node_modules/qrcode-generator',
                    src: 'qrcode.js',
                    prefix: 'it/designfuture/qrcode/3rdparty'
                }
            ],
            dest: '<%= dir.dest %>',
            compatVersion: '1.44',
            compress: false
        },
        libraries: 'it/designfuture/qrcode'
    }
}

This will include the script into your library-preload.js, as from the namespace (it/designfuture/qrcode/3rdparty/qrcode.js) it is part of it, although it's physically at a different location on your hard drive (node_modules/qrcode-generator/qrcode.js).

In your code you can load that script like any other module, by providing the namespace of it (it/designfuture/qrcode/3rdparty/qrcode). Note that currently the return value of such thirdparty module is not available in the sap.ui.define/require callback, so you need to use the global variables defined by the thirdparty scripts. In your case it would be qrcode.

Hope this helps 👍

[StErMi]

@matz3 I solved the issue, thank you very much for your help. You can checkout the updated repo: https://github.com/StErMi/openui5-qrcode

Now as I said I've to solve other issue:

• Add support to openui5_connect
• Find a good way to have the same codebase to develop and build (actually I cannot test the code without building it first)
• Find a way to generate -dbg version of the lib as referenced in this issue #44

[matz3]

@StErMi I guess this can be closed, as you switch to the UI5 Tooling.