Current app structure:

main.js


require.config({ 

 paths: {

 lodash: '../bower\_components/lodash/dist/lodash',

 can: '../bower\_components/canjs/amd/can',

 moment: '../bower\_components/moment/min',

 // ...

 }

});

// More RequireJS config

// Bootstrap the app!

require([

 'app'

], function(app) {

 app.init();

});

app.js


define([

 'jquery',

 'can',

 'i18next'

 // Many more dependencies, in which I want to access global config

 // but I don't want to put config dependency to each of them

], function ($, can, i18next) {

});

Problem:


Configuration is scattered around all app files.

I want to put it into one place, but even if it would be best practise, I don’t wanna put config as dependency to all the scripts (100+)

Solution


In RequireJS config, specify dependency for app.js


require.config({

 paths: {

 lodash: '../bower\_components/lodash/dist/lodash',

 can: '../bower\_components/canjs/amd/can',

 moment: '../bower\_components/moment/min',

 // ...

 },

 shim: {

 'app': { deps: ['config'] }

 }

});

config.js


define([ 

 'jquery',

 'can',

 'json!../global\_config.json',

 'vex'

], function (

 $,

 can,

 globalConfig,

 vex

) {

 // Quick&dirty global function

 window.getEnvParameter = function () { }

 window.Skypicker = {

 version: '@@version', // Replaced by Grunt

 apiVersion: '2',

 timestamp: '@@timestamp', // Replaced by Grunt

 };

 $.extend(window.Skypicker.config, globalConfig);

 can.view.ext = '.ejs';

 i18next.init({});

 can.stache.registerHelper('t', function(expr, options) {});

 vex.defaultOptions.className = 'vex-theme-default';

});