grunt requirejs ignores paths from my mainConfigFile

Question

Project Intro

My project is a single page storefront. The project has multiple modules, and each module contains a set of controller.js, view.js and model.js files, as well as a template.html file. And uses requirejs to manage dependencies.

Problem Statement

I want to use mainConfigFile to provide paths to reference modules in grunt-requirejs. Part of my mainConfigFile's require.config is stored in separate file (base.dependency.config), and require.config.paths are pieced together by underscore at runtime.

base.dependency.config

config = {
    baseDependencyConfig: {
        paths: { ... }
        shim: { ... }
    }
}

main.js

var dependencies = config.baseDependencyConfig;
var basePaths = config.baseDependencyConfig.paths;
var extensionPaths = {
    // extra sets of paths
};

// combine base paths and extension paths at runtime using underscore
var dependencyPaths = _.extend(basePaths, extensionPaths);

dependencies.paths = dependencyPaths;
require.config(dependencies);

// application startup
require(['app', 'eventbus']) {
    // code
}

Error

However, grunt requirejs is ignoring mainConfigFile, grunt requirejs tries to find 'app.js' under root, when in fact, 'app' is defined under require.config paths as

'app': 'modules/base/app/base.app.controller'

my gruntFile:

module.exports = function (grunt) {
    grunt.initConfig({
        // ... other plugin config
        requirejs: {
            options: {
                baseUrl: 'public',
                // the paths for the named modules such as 'app' are defined 
                // in main.js under require.config paths
                name: 'main',
                include: [
                    'app',
                    'cart',
                    'category'
        ],
        out: 'public/build/app-optimized.js',
        mainConfigFile: 'public/main.js',
        findNestedDependencies: true,
        optimizeCss: 'none',
        cssImportIgnore: 'style/style.css, style/mocha.css',
            }
        }
    })
}

my file structure

public
    |--modules/
    |       |--base/
    |       |       |--cart
    |       |       |--category
    |       |               |--category.controller.js
    |       |               |--category.view.js
    |       |               |--category.model.js
    |       |               └-category.template.html
    |       |
    |       └--extension/
    |
    |--style/
    |--image/
    |--main.js <-- main config file
    |--other .js files

• mainConfigFile, main.js lives in root, along with a few other application startup js files
• main bulk of application files lives inside modules folder
• each module folder contains its controller, view and model js file, as well as a template.html file

Edit

the gruntFile worked before, with different mainConfigFile (main.js) setup:

require.config({
    paths: {...}
    shim: {...}
})

// application startup
require(['app', 'eventbus']) {
    // code
}

Answer 1

r.js uses Esprima as Javascript parser to extract the config object from the specified mainConfigFile. It only looks for certain signatures in the code.

Look at

• hasRequire(): determine the AST node is a configuration call candidate
• findConfig(): calls the above deciding how to extract the config

I've created a patch making it aware of recognizing

requirejs.config(_VariableToExport = { ... });

This is limited and the Javascript parser approach makes it very complicated to make r.js able to extract configurations that were created by functions (like in your code) or so. This patch has not been submitted to the project yet. I'm struggling with bureaucracy yet.

I think the only working workaround so far is

• not to use mainConfigFile
• exporting the config as NodeJS module
• requiring the main.js/config.js in Node (Grunt)
• passing the object as value to the config attribute or method

See my comment to this issue for a scribble.

This approach is proven in another, a bit older project I'm working on.

Related to r.js 2.1.11.