RequireJS relative paths

Question

I'm new to RequireJS. I'm writing a number of custom bindings in Knockout.js and want to split them up using modules.

The layout of my code at the moment is:

/   default.html   js     code.js     require-config.js      lib       /require.js       bridge         bridge.js         bindings1.js         bindings2.js         bindings3.js 

I want to load bridge.js from default.html and have that load in all of the bindings files. I've tried loading bridge.js using a or inline js using the require function.

My require-config is very simple:

require.config({     baseUrl: '/' }); 

In bridge.js, I am having problems loading the files using a relative path. I tried:

require(['./bindings1', './bindings2', './bindings3'], function () {     console.log('loaded'); }); 

But this just ends up using the path baseUrl + 'bindings1.js', for example. I've tried various iterations in bridge.js. The only success I've had is if I write the entire path:

require(['js/bridge/bindings1', 'js/bridge/bindings2', 'js/bridge/bindings3'], function () {     console.log('loaded'); }); 

But that is not what I want. This seems like a pretty basic use case and I think I may be misunderstanding how the relative paths work.

Thanks

Answer 1

Relative IDs are resolved relative to the module ID within which the ID is resolved. See AMD spec's module id format section.

There are two ways to frame a relative dependency ID into a correct context/scope:

Define call

Define call is the start/definition of "module." All dependencies asked for within define() call are scoped to be within/relative to that module's ID. Example:

// does not matter what the file name is. define(     'hand/named/module'     , ['./child']     , factoryFunction ) 

or

// inside of 'hand/named/module.js' file. define(     ['./child']     , factoryFunction ) 

In both of the above cases, ./child is resolved against the module ID defined by the define() call. The module id in both cases is hand/named/module and the ./child is resolved to hand/named/child (+ '.js' obviously, when time comes to get it)

"Scoped" require

You can change the scope of require call from global to local by overriding it. You actually don't need to override / keep the name require, it's the meaning of what it does changes. The require functionality becomes "local" to a particular module.

// inside 'hand/named/module.js' file define(     ['require']     , function(myLocalRequire){         require('./child', function(){             // outcome A         })         myLocalRequire('./child', function(){             // outcome B         })     } ) 

There in outcome A you continue to use "global" require - the one attached to parent scope. Your ./child resolves to baseURL + '/child'

The outcome B is locally-scoped, tied to module id hand/named/module so, ./child is resolved to hand/named/child

What @CristiPufu recommended is to override the global require variable with local object that will be local only to the scope of that function:

// inside 'hand/named/module.js' file define(     ['require']     , function(require){         return function(){             // here we have access only to "local" require,             // since in the function declaration you decided to             // override the 'require' variable with new object.             // All code outside of this function will use global require.             require('./child', function(){                 // outcome B             })         }     } ) 

My preference is to put all relative resources inside define call. Makes them explicit and meeningfull as it's clear what they are relative to.