Develop Reference

Can I set a different path for a child dependency in the require.config?

I have two problems that are related to each other.
The first is that I want to have a folder named backbone, and that collides with having backbone as a short name for the library in the path. It seems that RequireJS thinks that backbone/model/User is a child of the backbone library or something. Solution, name the library Backbone with capital B.
The second problem is that I'm using ModelBinder, which has "backbone" as a dependency. Solution, change the minified file.
Both solutions seems like a bad hack for not doing something right in RequireJS configuration, but I cant figure out what I'm doing wrong.
My public folder structure is something like:
public/
js/
backbone/
model/
...
view/
...
vendor/
backbone.min.js
Backbone.ModelBinder.js
...
common.js
My common.js has something like this:
require.config({
baseUrl: "/js",
shim: {
'underscore': {
exports: '_'
},
"Backbone" : {
deps: ["underscore", "jquery"],
exports: 'Backbone'
}
},
paths: {
underscore: 'vendor/underscore.min',
jquery: 'vendor/jquery',
model_binder: 'vendor/Backbone.ModelBinder',
Backbone: 'vendor/backbone.min'
}
});
So my two questions are: How can I keep Backbone.ModelBinder as it is, and tell requirejs that when that library ask for backbone, its asking for js/vendor/backbone.min.js without "polluting" my global paths.
And why can't I use both backbone (lowercase b) in the path and have the directory?

One solution (yes, not so sane) is to include paths definitions for every directory under js/backbone, i.e.:
require.config({
...
paths: {
...
backbone: 'vendor/backbone.min', // NOTE lower-case 'b', as desired
"backbone/model": "backbone/model",
"backbone/view": "backbone/view",
... // and so on
}
});
This also means that there is no module directly under js/backbone.
An alternative would be to keep the capital 'B' in the module name for Backbone and use the map config for the Backbone.ModelBinder.js:
require.config({
...
paths: {
...
Backbone: 'vendor/backbone.min' // NOTE capital 'B' again
},
map: {
"model_binder": {
"backbone": "Backbone"
}
});
Thinkng retrospectively, the map can be applied to all modules so that whenever they request "backbone" (lower-case 'b') you deliver "Backbone":
require.config({
...
paths: {
...
Backbone: 'vendor/backbone.min' // NOTE capital 'B' again
},
map: {
"*": { // <------ Here difference form code above
"backbone": "Backbone"
}
});
Now anyone can ask for "backbone" and get Backbone, or "backbone/model/User" (or "backbone/module") and get the corresponding module.

Getting dependencies to load correctly in requirejs (autobahn and whenjs)

I have been stuck on this problem for the past few hours. I'm trying to get autobahnjs and whenjs to be loaded correctly by requirejs.
require.config({
paths: {
angular: '../bower_components/angular/angular',
angularBootstrap: '../bower_components/angular-bootstrap/ui-bootstrap',
bootstrap: '../bower_components/bootstrap/dist/js/bootstrap',
jquery: '../bower_components/jquery/jquery',
chosen: '../bower_components/chosen/chosen.jquery.min',
text: '../bower_components/requirejs-text/text',
autobahn: '../bower_components/autobahnjs/autobahn/autobahn'
},
packages: [
{ name: 'when', location: '../bower_components/when/', main: 'when' }
],
baseUrl: '/bundles/example/app/scripts/',
shim: {
angular : {
exports : 'angular'
},
angularBootstrap: {
deps: ['angular']
},
autobahn: {
deps: ['when']
}
},
priority: [
'angular'
]
});
require
( [
'angular',
'app',
'autobahn',
'angularBootstrap',
'jquery',
'bootstrap',
'chosen',
'controllers/event',
'services/notify'
], function(angular, app) {
// more code here
});
Autobahnjs has a dependency on whenjs. All the files are loaded (and in the correct order). but when is always undefined. I have absolutely no idea what I'm doing wrong. I've tried all sorts of ways to solve it. I also have a bower.json file if this helps anyone replicate the problem. Thanks in advance.
EDIT: Autobahnjs does not currently support AMD. Whenjs, however, does support it.

As you have noticed already, there is an issue for adding requirejs support to AutobahnJS. There is also more embedded stuff inside AutobahnJS bundled for "convenience", mainly parts from cryptojs.
The challenge simply is: how to best serve all users, not matter if and what module loader they use, and if they want convenience (bundled stuff) or prefer to have stuff separate (and manage/load that themselves).
I can't promise, but I try to address it with priority. However, for further discussion, I think the best place would be the GitHub issue.

This has now been implemented in v0.8.0

Use of "shim" in RequireJS [duplicate]

This question already has an answer here:
requirejs - what export exactly do here?
(1 answer)
Closed 9 years ago.
I am new to RequireJS and wa just going through the following configuration code;
({
appDir: "../",
baseUrl: "js",
dir: "../../appdirectory-build",
paths: {
jquery: 'libs/jquery/jquery-1.8.2',
underscore: 'libs/underscore/underscore-1.4.4',
backbone: 'libs/backbone/backbone-0.9.10',
templates: '../templates',
app: 'app'
},
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ["underscore", "jquery"],
exports: "Backbone"
}
},
modules: [
{
name: "main"
}
]
})
I did not understand what exactly is the "shim" used for?
Could someone please explain me in simple terms.

You can define non modular old scripts using shim config. By the non modular I mean the scripts those don't declare there dependencies using define(). So in the shim config in the above example you mention to load underscore and export it as '_' that means when the underscore is loaded it is accessible using _ in your application. And for backbone it means that before loading backbone, shim should ensure that underscore and jquery are loaded prior to backbone. Because underscore and jquery are the dependencies of the backbone, so shim is helping managing your dependencies of non modular scripts. After loading backbone export it as "Backbone" in your application.

Requirejs, almond, backbone, handlebars

Here's my situation, using Backbone and Handlebars with Requirejs.
I'm following CommonJS module definition style, because I find myself to be more comfortable with it:
define(function(require) {
var Backbone = require('Backbone')
var Item = require('model/item')
// ...
})
And this is my requirejs config:
require.config({
baseUrl: "/javascripts/",
paths: {
jquery: 'components/jquery/jquery',
underscore: 'components/underscore/underscore',
backbone: 'components/backbone/backbone',
handlebars: 'components/handlebars/handlebars',
text: 'components/text/text'
},
shim: {
underscore: {
exports: "_"
},
handlebars : {
exports: "Handlebars"
},
backbone: {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
}
});
Everything is running smooth before optimization, no problem occurs.
But, after optimization with r.js dependencies seem to break.
I'd like to use Almond js in production, so here's my build file:
({
baseUrl: ".",
paths: {
jquery: "components/jquery/jquery",
underscore: "components/underscore/underscore",
handlebars: "components/handlebars/handlebars",
backbone: "components/backbone/backbone",
text: "components/text/text"
},
// we use almond minimal amd module loader
name: "components/almond/almond",
// the application entry point
include: ['app/init'],
// we need to teel almond to require app/init
insertRequire: ['app/init'],
out: "main.js",
cjsTranslate: true,
wrap: true,
optimize: "none"
})
Now, when I run the optimized javascript in browser, all I get are error messages, saying me that jQuery and Handlebars are undefined (neither Backbone.$ is, of course).
A simple workaround was to force jQuery loading, and assigning it to Backbone, like this:
var $ = require('jQuery')
var Backbone = require('Backbone')
Backbone.$ = $
But it sounds very silly and redundant to me.
I feel like I'm doing something wrong but cannot figure out what.
After optimization Handlebars fail to load as dependency too.
If I force its loading (as I did with jQuery), I get an error message during the build process, saying me that the module fs (a npm package) cannot be found.
I googled but found only this topic on Google groups (https://groups.google.com/forum/?fromgroups=#!topic/requirejs/lYwXS-3qjXg) that seems to be related to my problem, even if proposed solutions are not working at all.

I think you should add the Shim's config in your build file too.

Loading Highcharts via shim using RequireJS and maintaining jQuery dependency

I'm attempting to load the Highcharts library using a shim in RequireJS. However, when Highcharts loads, it throws an exception because it can't access the jQuery methods it depends on.
The require config looks like so:
require.config({
baseUrl: "js",
shim: {
'libs/highcharts/highcharts.src.js': {
deps: ['jquery'],
exports: function(jQuery)
{
this.HighchartsAdapter = jQuery;
return this.Highcharts;
}
}
}
});
The exception that is thrown is:
Uncaught TypeError: undefined is not a function
and is in regards to this line:
dataLabels: merge(defaultLabelOptions, {
The issue is the merge call, which eventually maps itself back to jQuery (or some other adapter that Highcharts supports; but I'm just using jQuery).
I'm not sure exactly how to make sure Highcharts gets access to jQuery using RequireJS and shim.
Has anyone used RequireJS and Highcharts together before? I guess the issue isn't specific to highcharts, but any library that has other sorts of dependencies.
Thanks in advance for any advice or points to the correct direction!
To add further context, in hopes that someone who is familiar with require.js or shims will be able to help without having to be too intimately familiar with highcharts, here's some source that sets up this merge method in Highcharts
var globalAdapter = win.HighchartsAdapter,
adapter = globalAdapter || {},
// Utility functions. If the HighchartsAdapter is not defined,
// adapter is an empty object
// and all the utility functions will be null. In that case they are
// populated by the
// default adapters below.
// {snipped code}
merge = adapter.merge
// {snipped code}
if (!globalAdapter && win.jQuery) {
var jQ = win.jQuery;
// {snipped code}
merge = function () {
var args = arguments;
return jQ.extend(true, null, args[0], args[1], args[2], args[3]);
};
// {snipped code}
}
The win object is a reference set up to window at the beginning of the script. So, I thought adding window.jQuery = jQuery; to the export method on the shim would result in highcharts picking up the jQuery reference; but it didn't.
Again, any insight, info, advice, or heckles would be appreciated at this point - I'm at a complete loss, and starting to question whether trying to implement and AMD package system in browser javascript is even worth it.
After accepting the answer from pabera below I thought it appropriate to update my question to reflect how his answer helped my solution (though, it's basically his answer).
RequireJS uses "paths" to find libs that aren't "AMD" supported and loads them on your page. the "shim" object allows you to define dependencies for the libraries defined in paths. The dependencies must be loaded before requirejs will try to load the dependent script.
The exports property provides a mechanism to tell requirejs how to determine if the library is loaded. For core libs like jquery, backbone, socketio, etc they all export some window level variable (Backbone, io, jQuery and $, etc). You simply provide that variable name as the exports property, and requirejs will be able to determine when the lib is loaded.
Once your definitions are done, you can use requirejs' define function as expected.
Here's my example require.config object:
require.config({
baseUrl: "/js/",
paths: {
jquery: 'jquery',
socketio: 'http://localhost:8000/socket.io/socket.io', //for loading the socket.io client library
highcharts: 'libs/highcharts/highcharts.src',
underscore: 'libs/underscore',
backbone: 'libs/backbone'
},
shim: {
jquery: {
exports: 'jQuery'
},
socketio: {
exports: 'io'
},
underscore: {
exports: '_'
},
backbone: {
deps: ['jquery', 'underscore'],
exports: 'Backbone'
},
highcharts: {
deps: ['jquery'],
exports: 'Highcharts'
}
}
});
As pabera mentioned before, this is for Require.JS version 2.0.1.
I hope someone gets some use out of this; I know it road blocked me for a little while; so hopefully we kept you from banging your head into the same spot in the wall that we did, by posting this.

I had the exact same problem and I was struggling around many hours until I saw your entry here. Then I started over from scratch and now it works for me at least.
requirejs.config({
baseUrl:'/js/',
paths:{
jquery:'vendor/jquery',
handlebars: 'vendor/handlebars',
text: 'vendor/require-text',
chaplin:'vendor/chaplin',
underscore:'vendor/underscore',
backbone:'vendor/backbone',
highcharts: 'vendor/highcharts'
},
shim: {
backbone: {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
underscore: {
exports: '_'
},
highcharts: {
exports: 'Highcharts'
}
},
});
Since I use Chaplin on top of Backbone, I am including some more files in my paths attribute. Highcharts has a similar structure to Backbone so I thought I could load it the same way. It works for me now. As you can see, I am introducing highcharts in the paths attribute already to export it as a shim afterwords.
Maybe this helps, otherwise let's try to contribute on it even more to solve your problem.

Although jQuery can be used as an AMD module it will still export itself to the window anyway so any scripts depending on the global jQuery or $ will still work as long as jQuery has loaded first.
Have you tried setting a path? jQuery is an interesting one because although you're encoruaged not to name your modules by the RequireJS documentation, jQuery actually does.
From the jQuery source
if ( typeof define === "function" && define.amd && define.amd.jQuery ) {
define( "jquery", [], function () { return jQuery; } );
}
What that means is you will need to tell RequireJS where to find 'jquery'. So:
require.config({
paths: {
'jquery': 'path/to/jquery'
}
});
If you're interested in why jQuery registers itself this way then there is a pretty large comment in the source which goes into more detail