I have defined a RequireJs configuration which defines paths and shims:
require.config({
// define application bootstrap
deps: ["main"],
// define library shortcuts
paths: {
app: "app"
, jquery: "lib/jquery"
, underscore: "lib/underscore"
, backbone: "lib/backbone"
, bootstrap: "lib/bootstrap"
},
// define library dependencies
shim: {
jquery: {
exports: "$"
},
underscore: {
exports: "_"
},
backbone: {
deps: ["underscore", "jquery"],
exports: "Backbone"
},
bootstrap: {
deps: ['jquery'],
exports: "bootstrap"
},
// main application
app: {
deps: ["backbone"],
exports: "App"
}
}
});
As you see the last "shim" declaration should make it able to access backbone (and it deps) when I load the main App(-namespace).
In reality this doesn't work:
require(["app"], function($, _, Backbone, App){
app.router = new Backbone.Router.extend({
// routing and route actions
});
});
What makes me wondering is that in the "backbone-boilderplate"-project, Backbone (and its deps) are available this way:
https://github.com/tbranyen/backbone-boilerplate/blob/master/app/main.js
The not even had to define this in the function.
So what am I doing wrong?
From what I've read, requirejs passes arguments based on what you specify in the array... Thus your call should look like this:
require(["app"], function (App) { // less arguments
});
Or like this:
require(
["jquery", "underscore", "backbone", "app"], // more deps
function ($, _, Backbone, App) {
}
);
Remove the $, _, Backbone-parameters from the require-function where you extend the Router. The shims export global values, so there is no need to reference to them in require or define calls like you do for regular dependencies.
Passing them as parameters messes with the global variables and most likely results in them being undefined.
Related
I'd like to know how to load Underscore and Backbone using RequireJS and be able to configure Underscore before it's passed to Backbone.
I've seen this popular question on StackOverflow about this similar topic, but I haven't been able to figure out how to get Underscore to be configured for both of the following situations:
Underscore is required by itself
Underscore is loaded by Backbone
So my question is the following:
How can I configure Underscore using RequireJS when required by itself, and when required with Backbone in a module?
Here's what I've tried:
Approach that should work, but DOESN'T:
My first idea (as suggested here) was to define a requireJS module named (e.g.) rawUnderscore which returns Underscore without any configuration. Then, create a new module named underscore which requires rawUnderscore and configures it before returning its value. This causes loading problems (couldn't load backbone)
Configure Require.js modules
// When you initially setup require.js, add a new module to configure underscore
// Make it a dependency of backbone, so it'll always be loaded whenever
// backbone is used.
require.config({
paths: {
'underscore': 'underscoreConfig',
'rawUnderscore': 'underscoreOriginal'
},
shim: {
underscore: {
deps: ['rawUnderscore', 'jquery'],
exports: '_'
},
backbone: {
deps: ['underscore'],
exports: 'Backbone'
},
jquery: {
exports: 'jQuery'
}
}
});
underscoreConfig.js
define(['rawUnderscore'], function (_) {
'use strict';
_.templateSettings =
{
evaluate : /<%([\s\S]+?)%>/g,
interpolate : /<%cleanHtml([\s\S]+?)%>/g,
escape : /<%[=-]([\s\S]+?)%>/g
};
return _;
});
Approach that works - Edit Underscore and remove AMD ability:
This works if I remove the AMD lines from Underscore.js (ie force Underscore to not be AMD compliant). I'd prefer not to do this as I like to keep libraries as they are, to ease future maintenance.
Configure Require.js to use the underscore patch
require.config({
shim: {
underscore: {
deps: ['underscorePatch'],
exports: '_',
init: function(patchIt){
return patchIt(this._);
}
}
}
});
underscorePatch.js
define('underscorePatch', [], function(){
'use strict';
function patch(_){
_.templateSettings = {
evaluate : /<%([\s\S]+?)%>/g,
interpolate : /<%cleanHtml([\s\S]+?)%>/g,
escape : /<%[=-]([\s\S]+?)%>/g
};
return _;
}
return patch;
});
Approach that works when loaded with Backbone:
This approach works, but only in the context of when Backbone being loaded as well. Not when Underscore is required by itself.
Configure Require.js modules
// When you initially setup require.js, add a new module to configure underscore
// Make it a dependency of backbone, so it'll always be loaded whenever
// backbone is used.
require.config({
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ['underscoreConfig', 'underscore', 'jquery'],
exports: 'Backbone'
},
jquery: {
exports: 'jQuery'
}
}
});
underscoreConfig.js
define(['underscore'], function (_) {
'use strict';
_.templateSettings =
{
evaluate : /<%([\s\S]+?)%>/g,
interpolate : /<%cleanHtml([\s\S]+?)%>/g,
escape : /<%[=-]([\s\S]+?)%>/g
};
return _;
});
I think your first example was on the right track. The following seems to work:
main.js
requirejs.config({
paths: {
'underscore': 'underscoreConfig',
'originalUnderscore': 'underscore'
},
shim: {
'originalUnderscore': {
exports: '_'
}
}
});
underscoreConfig.js
define(['originalUnderscore'], function(_) {
_.templateSettings =
{
evaluate : /<%([\s\S]+?)%>/g,
interpolate : /<%cleanHtml([\s\S]+?)%>/g,
escape : /<%[=-]([\s\S]+?)%>/g
};
return _;
});
Did anyone successfully loaded moment.js in a r.js build (with almond) ?
I am using backgrid and backgridMomentCell: everything's works perfectly before I build my main.min.js file. After build time moment is not defined and thus can't be found by backgridMomentCell extension.
I've tried several option (even shim) without success.
If somedoby has a require.config that work can he/she shares it ?
EDIT (sorry for not answering any sooner, launch time kept me away from SO):
In the build file BackGridMomentCell keep throwing "moment is not defined" errors.
My code as requested in the comment
requirejs.config({
paths: {
backbone: 'vendor/backbone-1.1.0',
backbonePageable: 'vendor/backbone-pageable-1.4.1',
backgrid: 'vendor/backgrid/js/backgrid-0.2.6',
backgridPaginator: 'vendor/backgrid/js/extensions/paginator/backgrid-paginator',
backgridMomentCell: 'vendor/backgrid/js/extensions/moment-cell/backgrid-moment-cell',
bootstrap: 'vendor/bootstrap/js/bootstrap-3.0.1',
bootstrapDatepicker: 'vendor/bootstrap-datepicker/bootstrap-datepicker-fda46bb',
codemirror: 'vendor/codemirror/js/codemirror-3.20',
codemirrorMarkdown: 'vendor/codemirror/mode/markdown/markdown',
jsDiff: 'vendor/diff-1.0.7',
fullCalendar: 'vendor/fullcalendar/fullcalendar-1.6.4',
fullCalendarJqueryUiCustom: 'vendor/fullcalendar/jquery-ui-1.10.3.custom.min',
jquery: 'vendor/jquery-1.10.2',
marked: 'vendor/marked-0.2.10',
select2: 'vendor/select2/select2-3.4.5',
speakingurl: 'vendor/speakingurl-0.4.0',
underscore: 'vendor/underscore-1.5.2',
moment: 'vendor/moment.with.langs'
},
shim: {
backbone: {
deps: ['jquery', 'underscore'],
exports: 'Backbone'
},
backgrid: {
deps: ['jquery', 'backbone', 'underscore'],
exports: 'Backgrid'
},
backgridPaginator: {
deps: ['backgrid']
},
backgridMomentCell: {
deps: ['backgrid','moment']
},
bootstrap: {
deps: ['jquery']
},
bootstrapDatepicker: {
deps: ['jquery']
},
codemirror: {
exports: 'CodeMirror'
},
codemirrorMarkdown: {
deps: ['codemirror'],
exports: 'codemirrorMarkdown'
},
fullCalendar: {
deps: ['jquery', 'fullCalendarJqueryUiCustom']
},
fullCalendarJqueryUiCustom: {
deps: ['jquery']
},
select2: {
deps: ['jquery']
},
underscore: {
exports: '_'
}
}
});
The head of my module
define([
'jquery',
'fullCalendar',
'underscore',
'backgrid',
'backgridPaginator',
'moment',
'backgridMomentCell',
'backbone',
'collections/ItemPaginatedCollection',
'utils/BackgridCustomUriCell'
], function ($, _fullCalendar, _, Backgrid, _backgridPaginator, moment, MomentCell,Backbone, ItemPaginatedCollection, BackgridCustomUriCell) {
"use strict";
....
EDIT 3 :
Loading moment.js before my compiled main.js works but is not optimal IMHO.
The easiest two methods I have found:
1) Wrap backgrid-moment-cell.js in the CommonJS wrapper code specified in the RequireJS API. You can do this dynamically during the build process using the conversion tool mentioned in the API.
2) Require moment-cell inline and set findNestedDependencies to false in your build.js.
The issue is that the moment-cell code passes in this to itself when it is initialized, and looks for either "exports.moment" or "this.moment."
On a related note, including moment in the shim for moment-cell is unnecessary, and technically you should include underscore. From the API:
Only use other "shim" modules as dependencies for shimmed scripts, or
AMD libraries that have no dependencies and call define() after they
also create a global (like jQuery or lodash). Otherwise, if you use an
AMD module as a dependency for a shim config module, after a build,
that AMD module may not be evaluated until after the shimmed code in
the build executes, and an error will occur. The ultimate fix is to
upgrade all the shimmed code to have optional AMD define() calls.
Moment is actually an AMD module.
Most likely your problem is that you didn't specify findNestedDependencies true in your build file.
Take a look at this commit (from my book on RquireJS and Backbone.Marionette): https://github.com/davidsulc/structuring-backbone-with-requirejs-and-marionette/commit/85d3d3dd40d0cebd858224c3903a12d6998d668d
I think it's to do with moment's global object being deprecated.
2.4.0 - Deprecate globally exported moment, will be removed in next major
https://github.com/moment/moment
Moment needs to be defined in the specific module now.
My main.js look as below
requirejs.config({
//By default load any module IDs from ../js
baseUrl: '../js',
paths : {
'jquery': 'libs/jquery',
'underscore': 'libs/underscore',
'backbone': 'libs/backbone',
'bootstrap': 'libs/bootstrap'
},
shim: {
'jquery': {
exports: '$'
},
'backbone': {
//These script dependencies should be loaded before loading
//backbone.js
deps: ['jquery', 'underscore'],
//Once loaded, use the global 'Backbone' as the
//module value.
exports: 'Backbone'
},
'underscore': {
exports: '_'
},
'bootstrap': {
deps: ['jquery'],
exports: 'Bootstrap'
}
}
});
define(
['jquery', 'backbone','underscore', 'bootstrap'],
function (j, b, u, boot) {
console.log('jquery', j);
console.log('backbone', b);
console.log('underscore',u);
console.log('bootstrap', boot);
}
);
And my console image is like this:
When I click on X sign in alert, they disappear. So, I think bootstrap.js is loaded correctly. However, it says undefined in console. Can anyone make me clear is the bootstrap.js is loaded correctly and safe to use? And why it is saying undefined while rest of are defined well in console.
As jquery, backbone, and underscore export global variables to be used elsewhere, while bootstrap will just take the existing jquery object and will add plugins to the object, hence it won't export anything.
So, if you try to receive it in define callback, ideally it will be undefined. If you've used any bootstrap component on the page and if it is working it means bootstrap is integrated.
From the requirejs shim docs
For "modules" that are just jQuery or Backbone plugins that do not need to export any module value, the shim config can just be an array of dependencies:
requirejs.config({
shim: {
'bootstrap': ['jquery']
}
});
So, if you want, you can declare bootstrap like its specified in the docs.
In my project I would like to use backbone.babysitter, but I can't make it work.
I use require.js to load the modules, now my config looks like this.
requirejs.config({
paths: {
'underscore': 'lib/underscore',
'backbone': 'lib/backbone',
'backbone.babysitter': 'lib/backbone.babysitter',
'jquery': 'lib/jquery',
},
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ['underscore','jquery'],
exports: 'Backbone'
}
}
});
I use the AMD version of backbone.babysitter
When I do later in my code
require( ['backbone.babysitter'], function(){
var v = Backbone.ChildViewContainer();
});
I got the following error:
Uncaught TypeError: Object #<Object> has no method '_updateLength' backbone.babysitter.js:41
What am I doing wrong?
If backbone.babysitter depends on backbone and underscore you should state that between your dependencies:
'backbone.babysitter': {
deps: ['backbone', 'underscore']
}
since backbone already depends on unserscore and jquery:
'backbone.babysitter': {
deps: ['backbone']
}
would be sufficient.
I think you are not passing it to the function as parameter, but also you need to pass backbone:
require( ['backbone'], function(Backbone){
var v = Backbone.ChildViewContainer();
});
That should fix it.
I could make it work with not the AMD version of the lib like this.
under shim:
'backbone.babysitter': {
deps: ['backbone','underscore']
},
and require like this:
require( ['backbone.babysitter'], function(){
var v = new Backbone.ChildViewContainer();
});
I have a Backbone app that gets errors of Backbone is not defined non-deterministically from different spots in my code that use Backbone. Sometimes it loads first and the site loads, other times it doesn't. I'm using the following as my main.js:
require.config({
paths: {
jqueryui: 'libs/jquery/jquery-ui',
underscore: 'libs/underscore/underscore-min',
backbone: 'libs/backbone/backbone-min',
text: 'libs/require/text',
order: 'libs/require/order',
searchcollector: 'libs/jquery/searchcollector.plugin',
guiders: 'libs/jquery/guiders'
},
shim: {
'underscore': {
exports: '_'
},
'backbone': {
deps: ['underscore'],
exports: 'Backbone'
}
}
});
require([
'views/app',
'helpers'
], function(app) {
var app = window.app = new app();
});
I'm using
<script data-main="/assets/js/main" src="/assets/js/libs/require/require-jquery.js"></script>
in my HTML so jQuery is loaded with the require. I took this advice from this (http://stackoverflow.com/questions/8131265/loading-backbone-and-underscore-using-requirejs) SO thread, but nothing seems to be working. Shouldn't the Shim be loading the Backbone first and then making it globally available? Any help appreciated.
Not sure if this is the correct answer but I've noticed that you don't list jquery as a Backbone dependency. While Backbone lists Underscore as the only hard dependency, Backbone.View will need jquery or zepto to work.
But why then, does it seem to work some of the time?
It might be that since jQuery is an AMD module, when you load, it sometimes loads first, and other times it doesn't. When it loads before Backbone, it is available and Backbone is happy. Otherwise, perhaps, the bad results you are getting.
Try something like this:
In your path add this:
jquery: 'libs/require/require-jquery'
And in your shim, add this:
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
}
Let me know what you get as a result. I've never used the shim feature of requirejs2.0 so I'm curious whether I'm understanding the deeper stuff correctly.
In my opinion it's a little bit hacky to load require and jquery in the same file.
And set jquery as a deps for Backbone is false because Underscore need jquery, and it's loaded before Backbone so the correct way is like this
require.config({
paths: {
'jquery': 'path to jquery'
,'underscore': 'path to underscore'
,'backbone': 'path to backbone'
**other paths...**
}
,shim: {
jquery: {
exports: '$'
}
,'underscore': {
deps: [ 'jquery' ]
,exports: '_'
}
,'backbone': {
deps: [ 'underscore' ]
,exports: 'Backbone'
}
}
});
Finally your tag script will be
<script data-main="/assets/js/main" src="/assets/js/libs/require.js">
</script>
Then you just have to call lib you need like this
define( [ 'jquery', 'underscore', 'backbone' ],
function( $, _, Backbone )
{
// stuff
} );
And for a model you maybe don't need jquery and underscore so just calling Backbone will work
define( [ 'backbone' ],
function( Backbone )
{
// Backbone.extend ?
} );