How to get the r.js build script working

Question

I've read through the documentation and the example app.build.js file but just can't get my js files to concatenate and minify into one single file. I think I'm just not understanding exactly what settings I need in the build script and was hoping for some help.

My app is set up like this:

src >
    js >
        build.js
        r.js
        config.js
        app >
            main.js
        lib >
            module1.js
            module2.js
            module3.js
        vendor >
            require.js
            jquery.js
            jquery.validation.js

build >
    // Where concat and minified file would go

config.js looks like this:

requirejs.config({
    "baseUrl" : "src/js/lib", // Used because when setting dependencies in modules, this is used
    "paths" : {
        "app" : "../app",
        "jquery" : [
            "https://code.jquery.com/jquery-1.11.1.min",
            "../vendor/jquery"
        ],
        "validate" : "../vendor/jquery.validate.min"
    },
    "shim" : {
        // Allow plugins with dependencies to load asynchronously
        validate : ["jquery"]
    }
});

// Load the main app module to start the app
requirejs(["app/main"]);

main.js looks like this:

require(["module1", "module2", "module3"], function(Module1, Module2, Module3) {

    return [
        Module1.init(),
        Module2.init(),
        Module3.init(),
        Module4.init()
    ];

});

And then the build.js is where I'm lost. I thought I should load a mainConfigFile because I'm using the shim, but I'm not sure. If I do load that config file, it uses the baseUrl from that config file. I'm not sure what name: is supposed to refer to exactly and whether I'm missing some necessary configuration options.

({
    //baseUrl: ".",
    paths: {
        jquery: "empty:",
        //main: "../app/main",
        //app: "app"
    },
    name: "app/main",
    out: "../build/main.js",
    //mainConfigFile: "config"
})

If I run that build file as it is (with those lines commented out) I get:

Error: ENOENT, no such file or directory '/Users/davidpaul/Sites/require/src/js/module1.js' In module tree: app/main

I'm not really sure what's being referred to when it says 'module tree'. I keep making changes to paths in the build file but not making progress so hoping for someone to explain this a bit to me.

Where does the word "alpha" appear in your code? You should include this file in the question as well. — kryger
Sorry @kryger, that's a typo. I renamed my filenames for this question to make it simpler but forgot to do so with the error. Alpha was a module which I renamed to module1. I've edited the code in the question. — davidpauljunior

kryger kryger · Accepted Answer · 2014-12-11T18:07:21

The builder parses all paths relative to the build file location (unless changed via the baseUrl property). If you look relative to src/js/build.js, your main.js is in ./app/ and module1/2/3.js are in ./lib/. All paths inside modules have to be specified relatively to the common root, so to make your example work it's enough to change the signature of main.js to:

require(["lib/module1", "lib/module2", "lib/module3"], function(M1, M2, M3) {
   // (...)
})

Note that config.js doesn't take part in the build process, you may need to change it as well to make your application work both "raw" and optimized.

How to get the r.js build script working

1 Answers