R.js build doesn't follow require.config file - backbone.js

I'm trying to build my single page application that uses Require.js, AMD style modules.
I already configured all the dependencies, paths and shims in my init.js file that runs first and then calls my main.js file.
Here is my init.js file :
(function() {
'use strict';
var me = this;
me.require.config({
deps: ['backbone.marionette', 'main'],
shim: {
jquery: {
exports: 'jQuery'
},
underscore: {
exports: '_'
},
backbone: {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
},
'backbone.marionette': {
deps: ['jquery', 'underscore', 'backbone'],
exports: 'Marionette'
}
},
paths: {
jquery: '../lib/jquery/dist/jquery.min',
html5shiv: '../lib/html5shiv/html5shiv.js',
underscore: '../lib/underscore/underscore-min',
backbone: '../lib/backbone/backbone',
'backbone.marionette': '../lib/backbone.marionette/lib/core/amd/backbone.marionette.min',
'backbone.wreqr': '../lib/backbone.wreqr/lib/amd/backbone.wreqr.min',
'backbone.babysitter': '../lib/backbone.babysitter/lib/amd/backbone.babysitter.min',
text: '../lib/requirejs-text/text'
}
});
}).call(this);
and here is my r.js build config file :
({
baseUrl: '../../development/js',
optimize: 'closure',
paths: {
requireLib: '../lib/requirejs/require'
},
mainConfigFile: '../../development/js/init.js',
out: '../../distribution/main-build.js',
include: ['requireLib']
})
When I build, I only get Require.js inlined in my main-build.js file.
R.js doesn't follow the deps property defined in the require.config for some reason.
Any ideas on how to get a single file containing my Backbone.js / Marionette.js files and the dependencies described in the require.config found in the init.js file ?
Thanks in advance !

I wonder if it is the way you defined your config. Is there any reason for the init.js as opposed to just putting the require.config in main? It seems unnecessary to create an anonymous function just to encapsulate it.
From the example r.js build file:
The first requirejs({}), require({}), requirejs.config({}), or
require.config({}) call found in that file will be used.
What has always worked for me is to follow the more standard method of calling require.config() inside main.js

Related

requirejs backbone not loading properly sometimes

Once in three I got "backbone is not defined error". It's pointing to line 19 in requirejs file (router is declared in path line 21). It's like sometimes backbone is loading fast enough and sometimes not. I don't know what I did wrong. Below a part of the requirejs file and initialization.
require.config({
paths: {
//libs
jquery: '../../bower_components/jquery/dist/jquery.min',
// "jquery-ui": '../bower_components/jquery-ui/jquery-ui.min',
lodash: '../../bower_components/lodash/lodash',
backbone: '../../bower_components/backbone/backbone-min',
underscore: '../../bower_components/underscore/underscore-min',
gridstack: '../../libs/gridstack/dist/gridstack',
text: '../../bower_components/text/text',
router: '/client/js/router/router',
//other modules ...
}
shim: {
"backbone": {
deps: ['underscore','jquery'],
exports: "backbone"
},
"underscore": {
exports: "_"
},
"jquery": {
exports: "$"
},
"gridstack": {
deps: ['jquery','underscore'],
exports: "Gridstack"
}
});
require([
'jquery', 'backbone', 'lodash', 'router',
], function( $, Backbone, _, Router){
new Router();
Backbone.history.start();
});
And here is how my router is declared:
define('router',['appView'] , function(AppView) {
var router = Backbone.router.extend({
// etc/
One error I see is in your shim for Backbone in the RequireJS configuration. Older versions of Backbone that don't support RequireJS explicitly will export the global variable Backbone, not backbone. So ...
"backbone": {
deps: [ 'underscore', 'jquery' ],
exports: 'Backbone'
}
Note that any version of BackboneJS after 1.1.1 supports AMD-style modules, so you should not need a shim at all if you are using a recent version. In fact, using a version that supports AMD, but incorrectly declaring the shim, might be what is causing the 1-in-3 failure... but I'd have to see a running example to know for sure.

Handlebars - require plugin throws the error... Not compiling the template

In my app, I am using requirejs with handlbars plugin(https://github.com/SlexAxton/require-handlebars-plugin), I integrated with my app..
But I am keep getting an error, which i am not able to figureout why?
here is my error:
my require config file :
require.config({
baseUrl :'bower_components',
paths: {
"scripts":'../scripts',
"jquery":"jquery/jquery.min",
"underscore" :"underscore-amd/underscore-min",
"backbone" :"backbone-amd/backbone-min",
"marionette":"backbone.marionette/lib/backbone.marionette.min",
"text" : "requirejs-text/text",
"hbs":"require-handlebars-plugin/hbs",
"handlebars":"require-handlebars-plugin/handlebars",
'i18nprecompile' : 'require-handlebars-plugin/hbs/i18nprecompile',
'json2' : 'require-handlebars-plugin/hbs/json2'
},
shim: {
"jquery": {
exports: '$'
},
"underscore":{
exports: '_'
},
"backbone": {
deps: ["jquery","underscore"],
exports: "Backbone"
},
"marionette": {
deps: ["jquery", "underscore", "backbone"],
exports: "Marionette"
}
}
});
require(["scripts/main"]);
my view file :
define([
'jquery',
'underscore',
'backbone',
'hbs!../template/login1Template.hbs'],
function ($,_,Bacbone,hbr) {
"use strict";
socialApp = window.socialApp || {};
socialApp.loginView = Bacbone.View.extend({
template:_.template(loginTemplate),
initialize:function(){
var temp = hbr({adjective: "favorite"});
}
});
return socialApp.loginView;
}
);
Any one help me to sort this issue please? it's sucking my time here!
Thanks for all...
The problem is, I use bower.js to install all my moudles. in the plugin, it's not installed properly. some of files are missing from the git. manually i updated and the handlebars loading now.

After r.js build Backbone and Handlebars are undefined in App Loader

I have a problem with an r.js build in my app loader.
Unbuild mode is working perfect but after a build with r.js the variables in app_loader.js#L7 bb and hb are undefined. So far I work around by using global variables Handlebars und Backbone but what is wrong with this shim?
I have removed your global references and tested this locally. It works.
build.js - updated to use app_main as config file
({
optimizeCss: "standard",
removeCombined: true,
preserveLicenseComments: false,
appDir: "../www-root-dev",
dir: "../www-root",
keepBuildDir: false,
optimize: "uglify2",
mainConfigFile: "../www-root-dev/assets/js/app_main.js",
modules: [{
name: "app_main"
}]
})
app.js
define(["app_loader"], function(loader){
var $ = loader.$, Backbone = loader.Backbone;
...
});
app_loader.js
define(["jquery","underscore","backbone","handlebars","app_routes"],
function($, _, Backbone, Handlebars, router){
return {
$: $.noConflict(),
_: _,
Backbone: Backbone,
router: router,
Handlebars: Handlebars
};
});
app_main.js - updated to simplify paths
require.config({
baseUrl: './assets/js',
paths: {
mvc: '../../mvc'
},
shim: {
underscore: {
exports: '_' //the exported symbol
},
backbone : {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
handlebars: {
deps: ['jquery'],
exports: 'Handlebars'
}
}
});
require(['app'], function(App){
App.initialize();
});
app_routes.js
define(["jquery", "underscore", "backbone", "mvc/demo.view.js", "mvc/demo.model.js"], function($, _, Backbone, DemoView, DemoModel) { ... });
demo.model.js
define(["backbone"], function(Backbone) { ... });
demo.view.js
define(["jquery","backbone","text!mvc/demo.html"], function($, Backbone,demoTemplate) { ... });
I think the error is because in your shim you have exported backbone and handlebar as Backbone and Handlebars respectively,
backbone : {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
handlebars:{
deps: ['jquery'],
exports: 'Handlebars'
},
and in your app_loader.js#L7 you are using it as bb and hb.
Either in shim export it as bb and hb:
backbone : {
deps: ['underscore', 'jquery'],
exports: 'bb'
},
handlebars:{
deps: ['jquery'],
exports: 'hb'
},
or use Backbone and Handlebars in app_loader.js#L7 instead of bb and hb:
define("app_loader",[
"jquery",
"underscore",
"backbone",
"handlebars",
"order!assets/js/app_routes.js"
], function(jQuery, underscore, Backbone, Handlebars, router){
I am also new to backbone and requirejs but it should help.
I have forked your github project and use grunt requirejs to run the optimization.
I manage to run the site and didn't notice any console errors in Chrome.
I took your project and noticed the errors in your build. I then made some changes to your app_main.js file as follows. Let me know if this solves your issues? Solved mine.
// Require.js allows us to configure shortcut alias
// Their usage will become more apparent futher along in the tutorial.
require.config({
shim: {
underscore: {
exports: '_' //the exported symbol
},
backbone : {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
handlebars: {
exports: 'Handlebars'
}
},
paths: {
appLoader: 'app_loader',
jquery: 'jquery',
underscore: 'underscore',
backbone : 'backbone' ,
handlebars: 'handlebars'
}
});
require([
'app'
], function(App){
App.initialize();
});

Backbone + r.js. Making two different builds on one app on CoffeeScript

I have an issue to make two different builds on my app directory. I am using
Backbone+CoffeeScript, so it's a lot of staff in the folders.
I used build.js to generate one big result.js and load it on the page.
Now i want to make two different router.coffee files to include router1.coffee in one build(excluding router2.coffee) and vise versa to the other build.
Project structure:
app/
models/
model.coffee
collections/
collection.coffee
.............
lib/
settings.coffee
router1.coffee
router2.coffee
main.js
build.js
build/
result.js
My build.js:
({
baseUrl: ".",
name: "main",
out: "../build/result.js",
stubModules: ['cs', 'text'],
exclude: ['coffee-script'],
fileExclusionRegExp: /^views$/,
preserveLicenseComments: false,
optimize: "none",
paths: {
"cs" : "libs/cs",
'coffee-script' : 'libs/coffee-script',
'jquery' : 'libs/jquery-1.9.1',
'jquery_ui' : 'libs/jquery-ui.custom.min',
'backbone' : 'libs/backbone',
'backbone-relational': 'libs/backbone-relational',
//require.js dependency
"requireLib" : "libs/require"
},
shim: {
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'underscore': {
exports: '_'
},
'jquery_ui' : ['jquery'],
'fileDownload' : ['jquery']
},
include: "requireLib"
})
How can i have result1.js with only router1 included, and result2.js with only router2 included?
You should use two build.js file, one for each router.

Loading scripts with require.js

Here is my require.js load file:
require.config({
urlArgs: "noCache=" + (new Date).getTime(),
paths: {
jquery: "vendor/jquery-1.8.2.min",
bootstrap: "vendor/bootstrap.min",
underscore: "vendor/underscore-min",
backbone: "vendor/backbone-min",
template: "libs/template"
}
});
require(["jquery", "bootstrap", "underscore", "backbone", "template", "main"],
function ($, bootstrap, underscore, backbone, template, main) {
})
And inside the main.js file I have the following code:
define(["jquery", "underscore", "backbone"], function ($, _, Backbone) {
//Backbone and _ are undefined here, why?
})
So why ,,_" and ,,Backbone" are undefined here, what am I doing wrong?
How to properly use them inside other files?
If you are new to backbone and require js integration take a look to the following tutorial:
http://backbonetutorials.com/organizing-backbone-using-modules/
You are probably using the non-AMD version of Backbone and underscore. Using shim config you can load any library, even non-AMD modules, here is a shim config snippet from one of my source files:
requirejs.config({
baseUrl: 'assets/js/',
paths : {
'jquery': 'lib/jquery/jquery.min',
'underscore': 'lib/underscore/underscore-amd-min',
'backbone': 'lib/backbone/backbone-amd-min',
'bootstrap': 'lib/bootstrap/bootstrap.min',
},
shim: {
'backbone': {
deps: ['jquery', 'underscore'],
exports: 'Backbone'
},
'underscore': {
exports: '_'
},
'bootstrap': {
deps: ['jquery']
}
}
});
An alternative solution would be using the AMD version of those libraries you will find them here:
https://github.com/amdjs
Download and point to them in your path section.

Resources