CODEWITHSUNDEEP
javascriptrequirejs
Jacobian
Jacobian

Reputation: 10802

Load several configuration files with RequireJS

I'm new to RequireJs library and so I have a question. In my application I have one localistation file (called en.js, es.js, etc) and exactly one settings file (settings.js). The first one is used to localize my application (change messages, titles etc.) and the second one is used to set some configuration on the app. So, what I want is to load both localisation file (say, en.js) and settings.js file, before the main application file is loaded. Here the file tree structure:

\static
    \js
        \locale
           en.js
        \config
           settings.js
        \app
           app.js

In tutorials I've seen only one entry point specified by data-main, like:

<script data-main="scripts/main" src="scripts/require.js"></script>

But in my case it seems like there two main files (en.js and settings.js), that should be loaded first. So, what is the right way to implement this?

EDIT

For those who are new to modular JavaScript, I advise to read this article. I had spent many hours, trying to understand documentation and dozens tutorials, before I found this article. And I think, it is the best source of information for modular JavaScript newbies.

Upvotes: 0

Views: 181

Answers (2)

Louis
Louis

Reputation: 151380

The most straightforward way to load two configurations before you start your application is to not use RequireJS to load this configuration but load it with script elements. You could have:

<script src="scripts/require.js"></script>
<script src="path/to/settings.js"></script>
<script src="path/to/en.js"></script>
<script>
    require(["name of your main module"]);
</script>

The paths to en.js and settings.js are plain old JavaScript paths. "name of your main module" depends on what is in your RequireJS configuration, which you do not show in the question. I'd rather not assume. Given that settings.js is the general configuration for your application. I put it first so that en.js can benefit from it and contain only the minimum amount of code. So your settings.js would contain the general configuration options, which typically means at a minimum setting baseUrl, and most likely also paths:

requirejs.config({
    baseUrl: "static/js",
    paths: {
        // whatever makes sense for your application
    }
});

And your en.js file would also call requirejs.config with whatever it needs. What you need there depends on what internationalization solution you use. Your app.js would be something like:

define([ ... deps ... ], function (... arguments ... ) {
    // start the application
});

What you need for deps depends on what your application actually uses. You do not need en.js there or settings.js because these have already been loaded.

This way you do not need to nest anything.

Upvotes: 1

Pierfrancesco
Pierfrancesco

Reputation: 528

If your module app.js needs en.js and settings.js to works here's a possibile structure for your main.js

main.js:

requirejs.config({
    baseUrl: "/static/js",
    paths: {
        en: "locale/en",
        settings: "config/settings",
        app: "app/app"
    }
});


requirejs(["en", "settings"], function(enRes, settingsRes) {

    //here you're sure that both modules are loaded

    // you can load app module
    requirejs(["app"], function(appRes) {
      //start your app
    });

});

Upvotes: 1

Related Questions