Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Is it possible to set dependencies for a folder using require.js?

Is it possible to set dependencies for an entire folder using require.js?

I know that you can use the shim configuration to set dependencies for a file:

require.config({
    shim: {
        'plugin/backbone/xyz': {
            deps: ['lib/backbone'],
            exports: 'Backbone'
        }
    }
});

In the above example I define the dependencies for the plugin backbone/xyz, but I would like to define the dependencies for all backbone plugins:

require.config({
    shim: {
        'plugin/backbone/': { // I would like to specify a folder here but it doesn't work.
            deps: ['lib/backbone'],
            exports: 'Backbone'
        }
    }
});

I think that I once found a gist about it on GitHub, but I can't seem to find it again.


To clarify: This isn't about requiring an entire folder, but setting dependencies for it - What all files in the folder needs before they are ready to initialize, each and one of them. It would be accomplished by adding shims for all the files, but I would like to only have to add that shim once for the entire folder:

shim: {
    'lib/backbone': {
        exports: 'Backbone' // <- No use of .noConflict() so all plugins can be required and export Backbone as well.
    },
    'plugin/backbone/a': {
        deps: ['lib/backbone'], // <- Require backbone
        exports: 'Backbone' // <- Export backbone
    },
    // Same requirement and folder for these files:
    'plugin/backbone/b': {
        deps: ['lib/backbone'],
        exports: 'Backbone'
    },
    'plugin/backbone/c': {
        deps: ['lib/backbone'],
        exports: 'Backbone'
    }
}
like image 601
Andreas Louv Avatar asked Jul 19 '13 10:07

Andreas Louv


People also ask

Is RequireJS still relevant?

RequireJS is, in web-terms, an old technology now (some might say ancient), but it is still in wide use and there have been a number of questions about RequireJS and DataTables recently.

What is RequireJS used for?

RequireJS is a JavaScript library and file loader which manages the dependencies between JavaScript files and in modular programming. It also helps to improve the speed and quality of the code.

How do I use require config?

RequireJS can be initialized by passing the main configuration in the HTML template through the data-main attribute. It is used by RequireJS to know which module to load in your application. To include the Require. js file, you need to add the script tag in the html file.

Is RequireJS synchronous?

Is RequireJS synchronous? So, RequireJS doesn't support it. From your use case it seems that you don't need synchronous RequireJS, you need to return result asynchronously. AMD pattern allows to define dependencies and load them asynchronously, but module's factory function must return result synchronously.


2 Answers

No, you cannot easily create a wildcard to add dependencies to all files under a folder from the configuration itself. You can however create a loop before the config and add whichever dependencies you want.

var config = {
    shim: {
        'plugin/backbone/xyz': {
            deps: ['lib/dependency'],
            exports: 'Backbone'
        }
    }
};
for(var shim in config.shim) {
    if(shim.indexOf('plugin/backbone/') == 0) {
        if(config.shim[shim].deps == null) {
            config.shim[shim].deps = [];
        }
        config.shim[shim].deps.push('lib/backbone');
    }
}
require.config(config);

This is the only way I can think of without having to override one of require's functions yourself. Not elegant, I will admit, but it will do the job.

like image 108
J_A_X Avatar answered Sep 18 '22 12:09

J_A_X


Inspired by @J_A_X's answer

You can make an array of files that should share the same dependencies and create the shim dynamically:

var config = { shim: { /*...*/ } }

var plugins = ['a', 'b', 'c', 'd'],
    plugin_shim = {
        deps: ['lib/backbone'],
        exports: 'Backbone'
    };  

plugins.forEach(function(file) {
    config.shim['plugin/backbone/' + file] = plugin_shim;
});

require.config(config);

But this wouldn't work very well if someone would minuglify using r.js

like image 42
Andreas Louv Avatar answered Sep 18 '22 12:09

Andreas Louv