How to require a file conditionally in JavaScript

Question

I want to require/ load a file conditionally based on a variable. I am stumped and not sure how I can do it.

Here is my current file:

function init() {
  return new Promise(resolve => {
    require({}, [
        'dojo/i18n!app/nls/app',
        //if (${lang} != "en") { `app/src/${lang}/culture` },
        'bridge/adobe/css/dribble.css',
        'builder/adobe/newcss/snip.css'
      ],
      function(f1, f2) {
        System.import('langUtils').then(langUtils => {
          langUtils.start(f1, f2);
          resolve();
        });
      });
  });
}

How I could require the file based on the condition (commented part in the code). Could someone please point me in the right direction.

Thank you.

Did you read [Advanced AMD Usage: Conditionally requiring modules](https://dojotoolkit.org/documentation/tutorials/1.10/modules_advanced/#conditionally-requiring-modules)? — zero298, Feb 13 '18 at 16:44
Also avoid the [`Promise` constructor antipattern](https://stackoverflow.com/q/23803743/1048572?What-is-the-promise-construction-antipattern-and-how-to-avoid-it)! — Bergi, Feb 13 '18 at 16:46
@Bergi Thanks a lot for pointing the mistakes out and suggesting good patterns. :) When you say put the call in an if, you meant call the entire `require` function in if? — Angela Roux, Feb 13 '18 at 16:52
@AngelaRoux I guess it's more like putting the dependencies in a named array, and then conditionally (i.e. `if (${lang} != "en")`) pushing the language file onto it, then calling `require` with the dynamically-built array. — Bergi, Feb 13 '18 at 16:56

score 1 · Accepted Answer · answered Feb 13 '18 at 16:53

You already kind of are. Each nested scope of the require provides whatever dependencies you are stating. You have an outer scope that requires "app", "dribble.css", and "snip.css". You need to have another nested scope that states the "culture" requirement. "culture" will be defined within that scope (and only that scope).

Please ready Advanced AMD Usage: Conditionally requiring modules for more details.

const lang = "en";

function init() {
    return new Promise(resolve => {
        require({}, [
            "dojo/i18n!app/nls/app"
            "bridge/adobe/css/dribble.css"
            "builder/adobe/newcss/snip.css"
        ], function (app, dribbleCSS, snipCSS) {
            if (lang !== "en") {
                require({}, [`app/src/${lang}/culture`], function (culture) {
                    console.log(culture);
                    /*
                     * This scope has culture and if your path needs culture,
                     * you need to execute next steps here, where culture is
                     * defined and available
                     */
                });
            }
            /*
             * culture is NOT available in this scope and you need to handle
             * appropriately by either duplicating this code above or doing
             * doing something else.
             */
            System.import("langUtils").then(langUtils => {
                langUtils.start(app);
                resolve();
            });
        });
    });
}

Thanks a lot for your detailed answer. Really helpful :) – Angela Roux Feb 13 '18 at 18:07 — Angela Roux, Feb 13 '18 at 18:07

How to require a file conditionally in JavaScript

1 Answers1