Automatically list require.js dependencies with async loading for r.js optimization

Question

I will try to simplify my problem. I've got a main application (single page app essentially) that requires javascript files based on its own config file.

The json config file looks like this (that config file is not related to requirejs, it is the app own config file):

"modules": [
    {
        "categories": "categories/main"
    }
]

The main application is basically loading its config json file, and requiring the modules on runtime, something like:

function loadModule(id, modulePath) {
    require([modulePath], function(module) {
        // modulePath is categories/main
    });
}

I've got an AMD config that looks like that:

    require.config({
    'paths': {
        'categories':'js/app/modules/categories',

The module looks like this:

define('categories/main', [
    'categories/data/navigation'
], function (
    navigation
) {

    'use strict';

    var CategoriesModule = function() {

    };

    CategoriesModule.id = 'categories';

    return CategoriesModule;
});

So this is working all fine with non-minified version.

Note that even though I dynamically load the modules in my app, I still want the modules to be minified inside the only one minified file that I have in my app. I do not want to make an http request at runtime to load the module.

For this I have included the module in my optimization build:

require.config({
    include: [
        'app/modules/categories/main'

This works just fine as well, but here is what I am trying to do.

If you look back at the module, it requires another file: 'categories/data/navigation'.

And this file is not minified because apparently r.js has no way of following the dependencies of files that are loaded at runtime.

I kind of expected r.js to follow the dependencies of what I have "included" in this optimization build config.

So to solve the problem, I would need to do the following in my optimization build config:

require.config({
    include: [
        'app/modules/categories/main',
        'app/modules/categories/data/navigation'

In other words, list of the files that the module is using, which is what I'm trying to avoid.

I thought findNestedDependencies would solve the problem but it doesn't. Here is my r.js config for information:

options: {
    paths: {
        'main': 'js/main'
    },
    logLevel: 0,
    baseUrl: 'public',
    mainConfigFile: ['build/optimization/require.config.js', 'public/js/app/config/amd.js'],
    generateSourceMaps: false,
    preserveLicenseComments: true,
    name: 'main',
    out: 'public/js/main.min.js',
    removeCombined: true,
    findNestedDependencies: true,
    uglify: {
        beautify: false,
        mangle: false
    }
}

This app is fairly large and it is important for me to limit the required work needed when creating a module, a "plug and play" module is what I am after.

Listing all the files the module is using for minification is something I'd like to find a solution for.

Any hint? Any idea?

Why is r.js not able to follow the dependencies of my module when I include the main file of the module in the optimization config?

Any help appreciated.

Cheers.

Soundstep Soundstep · Accepted Answer · 2015-02-11T14:33:13

I will answer my own question. r.js wasn't able to follow the dependencies of the modules because I included the full path of the module in the build optimization config. Using the path shortcut, which is also the defined name of the module, r.js is then able to follow the dependencies.

I'm not sure why but I guess it probably makes sense.

Rather that using:

require.config({
include: [
    'app/modules/categories/main'

The include should be:

require.config({
    include: [
        'categories/main'

Probably because of the require config path:

require.config({
    'paths': {
        'categories':'js/app/modules/categories'

Hope that will help someone with the same kind of problem!

Automatically list require.js dependencies with async loading for r.js optimization

1 Answers