0

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.

Improve this question

2 Answers 2

Reset to default
1

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.

Improve this answer
Sign up to request clarification or add additional context in comments.

8 Comments

And if it is so, why then to use require.js and not just to load app.js with plain old script?
RequireJS is used to load everything else. Just not its own configuration. In the simplest cases, having RequireJS load its own configuration is okay but once you start multiplying configurations you are asking for trouble.
Oh, I see what you mean, but I did not plan to load its own configuration, I planned to load application configuration and localisation file. Both, settings.js, en.js and app.js do not contain any requirejs code.
What? Is it not the case that settings.js and en.js both contain calls to requirejs.config? And app.js is an AMD module that calls define? Otherwise, you should ask yourself the question "Why am I using RequireJS?"
I've edited the answer. This is about as precise as I can be. What you need to do specifically depends on the specifics of your application.
|
1

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
    });

});
Improve this answer

9 Comments

I find it useful. Thanks!
@ Louis, What is wrong with that? I've not accepted it, yet, so you may share your own solution
@Jacobian It's not been accepted but it's been upvoted. This answer will result in intermittent failures. (Oh, and mainConfigFile is not a runtime option. It is an optimizer option.)
It was upvoted, because I do not like to discourage people, when they try to help.
@Pierfrancesco Okay, I'm not happy with the indeterminacy of order between en and settings but... hmm... if one is really really careful, they may get something that works. I would not do this in my own projects as I know what happens if I set up something which requires me to be really really careful weeks, months and years later: I forget that I had to walk on eggshells.
|

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.