How Can I Place RequireJS Config in Separate File and Make the r.js Optimizer Work?

Question

Most examples for RequireJS setup, place the configuration object in the main.js entry point, something like this:

//main.js
require.config({
"paths": {
    //libs
    "lib1": "assets/js/lib/lib1",
    "lib2": "assets/js/lib/lib2",
    "lib3": "assets/js/lib/lib3",
    "lib4": "assets/js/lib/lib4"
    }
});
//start the app
define(["lib1"], function(lib1){/*start the app*/});

I prefer to place the configuration object in a separate file, because as it grows, it's difficult to maintain in the same file.

The following setup works when I run it in the browser, but for some reason I get an error when running the r.js optimizer:

//config.js
define({/*all configuration here*/});

//main.js
define(["config", "require"], function(config, require){
    requirejs.config(config); //set configuration
    require(["app"]); //launch app, where "app" path is defined in config.js
});

When I run r.js, I get the following error:

*Tracing dependencies for: main

Error: ENOENT, no such file or directory 'C:\Work\project\target\app.js*

So it seems that r.js doesn't get the configuration settings, because it's looking for app.js as a relative script, not as a module with a defined path.

Here is my build.js file (appDir, dir and mainConfigFile are relative to the build.js file):

({
    appDir: "../src",
    baseUrl: ".",
    dir: "../target",
    mainConfigFile: "../src/main.js",
    findNestedDependencies: true,
    modules: [
        {
            name: "main"
        }
    ]
})

Answer 1

This is how I am doing it. I like having the configuration file separate because I am reusing it in the tests.

Folder structure:

PROJECT
|
+- build (build output directory)
|
+- build-scripts (contains r.js, build.js)
|
+- WebContent
   |
   +- index.html (application main file)
   |
   +- scripts
      |
      +- require-cfg.js
      |
      +- main.js
      |
      +- ...

The configuration file (require-cfg.js - showing only the relevant stuff):

var require = {
    baseUrl: "scripts",
    paths: ...
    ...
};

The build file (build.js):

({
    appDir: "../WebContent/",
    baseUrl: "scripts/",
    mainConfigFile: "../WebContent/scripts/require-cfg.js",
    paths: {
        /* repeated from require-cfg.js */
    },
    dir: "../build",
    optimize: "uglify2",
    inlineText: true,
    removeCombined: true,

    name: "main"
})

Bootstraping code (index.html):

<script src="scripts/require-cfg.js"></script>
<script src="scripts/lib/require-2.0.2-jquery-1.10.2.js"></script>
<script src="scripts/main.js"></script>

I execute r.js with the build.js configuration inside the build-scripts folder. Optimized and combined output goes to the build folder. You can adapt the paths to suit your needs.