Requiring a separate require.js app

Question

I have two require.js apps. The second uses the first one as a dependency. It looks like that:

in app1/main.js

requirejs.config( {
    baseUrl : 'js', // baseUrl relative to app1 folder
    paths: {
        // paths used for app1
    }
});
requirejs(['module'], function (module)  {
    return module;
});

This file needs to be completely "standalone" and has its own require config so it can load its module and libs.

Then, in app2/main.js

requirejs.config( {
    baseUrl : 'js', // baseUrl relative to app2 folder
    paths: {
        'app1' : '../app1/main' // Using the other app
    }
});
requirejs(['app1', 'module'], function (app1, module)  {
    console.log(app1, module); // The first one should be app1/module.js, the second app2/module.js
});

This second file need to have its config, but also needs to load app1/main.js as a dependency like it was a usual module.

but the two requirejs.config just get mixed and if I require a file in the first one it uses the baseUrl of the second, or other problems like that.

So:

How can I turn a require.js app into a loadable module that keeps its own config?
Is it possible to do this without building before? (I need to work on both at the same time and I'd prefer not to have to wait for builds each time I change something)
I read about namespaces which maybe is a solution but didn't see anything about how to use them for these sort of cases - If I have to add them manually at the start of my files it's not a problem for me.

Andrew Shustariov Andrew Shustariov · Accepted Answer · 2014-01-15T19:22:01

You are referencing to your second app's configuration, as I understand. I belive, you should separate your configuration and this app1module module. Then you will be able to require your app1module wihtout configuration part.

In other words:

app1/main.js

requirejs.config( {
    baseUrl : 'js', // baseUrl relative to app1 folder
    paths: {
        // paths used for app1
    }
});

app1/module1

requirejs(['module'], function (module)  {
    return module;
});

Your index.html from app1 then will be updated to in this way:

from something like this:

<script type="text/javascript" data-main="js/main" src="js/libs/require.js"></script>

to:

<script type="text/javascript" data-main="js/main" src="js/libs/require.js"></script>
<script>
    require(['module1']);
</script>

Then you may easy use app1/module in your second app.

I updated my demo repository with this example. Check it out.

Requiring a separate require.js app

1 Answers