Redundant dependencies with RequireJS

问题:

My problem is with having redundant RequireJS dependencies that point to the same JS library.

The referenced library is jQuery UI, it's referenced both internally and by external library Gridstack, which is causing this issue.

Both internal and external references should point to ONE file jquery-ui.js.

How to configure RequireJS (i.e. inside main.js) to handle these references as one without doing any changes to any of the existing modules/libraries?

• JQuery UI v1.11.2 - My JQuery UI distribution (single file)

• Gridstack 0.2.5-dev - The library that references it as jquery-ui/core, jquery-ui/widget, jquery-ui/mouse, jquery-ui/draggable and jquery-ui/resizable

• I use jquery.ui internally

回答1:

While Louis' answer pointed me in the right direction, it still took me some time to figure out the complete solution, so I'm posting my working requirejs config here for future reference:

requirejs.config( {

    baseUrl: 'js',
    paths: {
        jquery: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min',

        'jquery.ui': 'https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min',

        lodash: 'https://cdnjs.cloudflare.com/ajax/libs/lodash.js/4.17.4/lodash.min',
        gridstack: 'https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.3.0/gridstack.min',
        'gridstack.jqueryui': 'https://cdnjs.cloudflare.com/ajax/libs/gridstack.js/0.3.0/gridstack.jQueryUI.min',

    },
    map: {
        '*': {
            'jquery-ui/data': 'jquery.ui',
            'jquery-ui/disable-selection': 'jquery.ui',
            'jquery-ui/focusable': 'jquery.ui',
            'jquery-ui/form': 'jquery.ui',
            'jquery-ui/ie': 'jquery.ui',
            'jquery-ui/keycode': 'jquery.ui',
            'jquery-ui/labels': 'jquery.ui',
            'jquery-ui/jquery-1-7': 'jquery.ui',
            'jquery-ui/plugin': 'jquery.ui',
            'jquery-ui/safe-active-element': 'jquery.ui',
            'jquery-ui/safe-blur': 'jquery.ui',
            'jquery-ui/scroll-parent': 'jquery.ui',
            'jquery-ui/tabbable': 'jquery.ui',
            'jquery-ui/unique-id': 'jquery.ui',
            'jquery-ui/version': 'jquery.ui',
            'jquery-ui/widget': 'jquery.ui',
            'jquery-ui/widgets/mouse': 'jquery.ui',
            'jquery-ui/widgets/draggable': 'jquery.ui',
            'jquery-ui/widgets/droppable': 'jquery.ui',
            'jquery-ui/widgets/resizable': 'jquery.ui',
        }
    },
} );

require( ['dashhub'] );

Note that I could not seem to get it working with the gridstack.all.js script from cdnjs. This means in your modules you must reference both gridstack and gridstack.jqueryuiin the define command.

回答2:

Looking at the jquery-ui.js file you are trying to load, I see that it is a combination of a multiple functions that could be in separate files and that it calls define only once. So it registers as a single module. This is important to know because if it had called define for each of jquery-ui/mouse, jquery-ui/draggable, etc. then the solution would be different because then we'd be talking about a single jQuery UI file that contains multiple modules.

Ok, so this being established, what you can do is use a map in your RequireJS configuration. I'm assuming you already have a proper paths configuration that allows loading the jquery-ui.js file as the jquery.ui module. Add this map:

map: {
    '*': {
        'jquery-ui/mouse': 'jquery.ui',
        'jquery-ui/draggable': 'jquery.ui',
        // And so on for all different cases...
    }
}

This says in all modules (*) whenever jquery-ui/mouse is requested, then load jquery.ui instead, and so on for all the other modules that will be listed under *.