We Keep Coding

RequireJS Optimization Not Loading Libraries

I'm working with the ngStart Angular seed project and I'm trying to optimize RequireJS for deployment. When I run the grunt job to build the artifact, I end up with an output file that does not include all of the libraries in my main.js file. I've spent most of today trying different things to get this to work. If I explicity list every module in my gruntfile (something I really don't want to do) they all get in there, but seemingly not in the right order as it doesn't work in the browser. I thought that the optimizer was supposed to read the require.config call in my main.js and load everything in the correct order. Below is what I thought should work, but isn't loading all of my modules.
grunt task:
requirejs: {
compile: {
options: {
baseUrl: "<%= pkg.folders.jsSource %>",
name: "main",
include: [
'almond'
],
mainConfigFile: "<%= pkg.folders.jsSource %>/main.js",
out: "<%= pkg.folders.build + pkg.name + '-' + pkg.version %>/modules/main.js",
optimize: "none",
paths: {
'almond': '../../../bower_components/almond/almond',
'config/configuration': 'config/<%=configuration%>'
},
generateSourceMaps: true,
preserveLicenseComments: false,
useSourceUrl: true,
uglify2: {
// TODO - angular.js is already minified, mangling destroys it, so mangling is currently globally disabled
mangle: false
}
}
}
}
main.js:
/*global require */
(function (require) {
"use strict";
require.config({
paths: {
'jquery': '../../../bower_components/jquery/jquery',
'jquery-ui': '../../../bower_components/jquery-ui/ui/jquery-ui',
'jquery.ui.widget': '../../../bower_components/jquery-ui/ui/jquery.ui.widget',
'bootstrap': '../../../bower_components/bootstrap/dist/js/bootstrap',
'angular': '../../../bower_components/angular/angular',
'ngResource': '../../../bower_components/angular-resource/angular-resource',
'angular-route': '../../../bower_components/angular-route/angular-route',
'angular-sanitize': '../../../bower_components/angular-sanitize/angular-sanitize',
'ngUi': '../../../bower_components/angular-ui/build/angular-ui',
'ui.bootstrap': '../external-libs/angular-ui-bootstrap/ui-bootstrap-tpls-0.6.0-SNAPSHOT',
'ngCalendar': '../../../bower_components/angular-ui-calendar/src/calendar',
'uikeypress': '../../../bower_components/angular-ui-utils/modules/keypress/keypress',
'dtPicker': '../../../bower_components/eonasdan-bootstrap-datetimepicker/build/js/bootstrap-datetimepicker.min',
'fileUpload': '../../../bower_components/blueimp-file-upload/js/jquery.fileupload',
'fullcalendar': '../../../bower_components/fullcalendar/fullcalendar',
'iframeTransport': '../external-libs/iframetransport/jquery.iframe-transport',
'moment': '../../../bower_components/momentjs/moment'
},
shim: {
'jquery': { deps: [], exports: 'jquery' },
'jquery-ui': { deps: ['jquery'], exports: 'jquery-ui' },
'jquery.ui.widget': { deps: ['jquery'], exports: 'jquery-ui-widget' },
'bootstrap': { deps: ['jquery'], exports: 'bootstrap' },
'angular': { deps: ['jquery'], exports: 'angular' },
'ngResource': { deps: ['angular'], exports: 'ngResource' },
'angular-route': { deps: ['angular'], exports: 'ngRoute' },
'angular-sanitize': { deps: ['angular'], exports: 'ngSanitize' },
'ngUi': { deps: ['angular'], exports: 'ngUi' },
'ui.bootstrap': { deps: ['angular', 'bootstrap', 'ngUi'], exports: 'ui-bootstrap' },
'ngCalendar': { deps: ['jquery', 'jquery-ui', 'fullcalendar', 'angular'], exports: 'ngCalendar' },
'uikeypress': { deps: ['angular', 'ngUi'], exports: 'uikeypress' },
'dtPicker': { deps: ['jquery', 'bootstrap', 'moment'], exports: 'dtPicker' },
'fileUpload': { deps: ['jquery', 'jquery-ui', 'bootstrap', 'iframeTransport'], exports: 'fileUpload' },
'fullcalendar': { deps: ['jquery', 'jquery-ui'], exports: 'fullcalendar' },
'iframeTransport': { deps: ['jquery', 'jquery-ui'], exports: 'iframeTransport' },
'moment': { deps: ['jquery'], exports: 'moment' }
},
priority: ['angular']
});
require(['config/config',
'angular',
'angular-route'],
function (config, angular, routes) {
require(config.standardRequireModules, function (angular) {
angular.bootstrap(document, ["app"]);
});
});
}(require));
When I run the task, I get this:
Running "requirejs:compile" (requirejs) task
Tracing dependencies for: main
/Users/user/dev/project/trunk-angular/target/project-0.1.0/modules/main.js
----------------
/Users/user/dev/project/trunk-angular/bower_components/almond/almond.js
/Users/user/dev/project/trunk-angular/bower_components/jquery/jquery.js
/Users/user/dev/project/trunk-angular/bower_components/angular/angular.js
/Users/user/dev/project/trunk-angular/src/main/modules/config/configuration.js
/Users/user/dev/project/trunk-angular/bower_components/bootstrap/dist/js/bootstrap.js
/Users/user/dev/project/trunk-angular/bower_components/angular-ui/build/angular-ui.js
/Users/user/dev/project/trunk-angular/src/main/external-libs/angular-ui-bootstrap/ui-bootstrap-tpls-0.6.0-SNAPSHOT.js
/Users/user/dev/project/trunk-angular/src/main/modules/config/config.js
/Users/user/dev/project/trunk-angular/bower_components/angular-route/angular-route.js
/Users/user/dev/project/trunk-angular/src/main/modules/main.js
Root of the project is /Users/user/dev/project/trunk-angular.
All of the path variables should be fine (they are in the other tasks and the outputted paths are right). I just don't know what's going on and would greatly appreciate some help.

First, I see, you are using nested require calls, but your build configuration doesn't include
findNestedDependencies: true.
Second, requirejs optimizer includes only those modules from path, that are explicitly required, or defined as a dependency for other modules, that are required later.

RequireJS not loading from paths confing

I have the following main.js
requirejs.config({
baseUrl: 'js',
paths: {
"jquery": "http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"
},
shim: {
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'marionette': {
deps: ['jquery', 'underscore', 'backbone'],
exports: 'Marionette'
},
'underscore': {
exports: '_'
}
}
});
The code to require query:
define(['jquery', 'backbone', 'marionette'], function($, Backbone, Marionette) {
Backbone, marionette and underscore all load correctly, but requireJS is ignoring the 'paths' config and trying to load jquery from js/jquery.js, not the CDN.
Using requires 2.1.9

You should exclude the ".js" extension from the CDN URL, just as you would for file paths in your baseUrl directory:
paths: {
"jquery": "http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min"
},

Uncaught Error: No define call in require.js

I am a newbie with backbone.js and require.js, I still not clear of how to use require.js. Now I'm trying to use require.js with Jquery Reveal.
This is my main.js :
requirejs.config({
enforceDefine: true,
paths: {
"jquery": "libs/jquery/jquery-min",
"underscore": "libs/underscore/underscore-min",
"backbone": "libs/backbone/backbone-min",
"jquery.reveal":"libs/jquery/jquery.reveal"
},
shim: {
"underscore": {
deps: [],
exports: "_"
},
"backbone": {
deps: ["jquery", "underscore"],
exports: "Backbone"
},
"jquery.reveal": ["jquery"]
}
});
define(["jquery", "underscore", "backbone","jquery.reveal"],
function ($, _, Backbone,Jquery_Reveal) {
console.log("reveal " + typeof Jquery_Reveal);
}
);
app.js :
define([
'jquery',
'underscore',
'backbone',
'router',
'jquery.reveal'
], function($, _, Backbone,Router,Reveal){
var initialize = function(){
Router.initialize();
};
return {
initialize: initialize
};
});
Then I got an error in chrome console : Uncaught Error: No define call for reveal.

This is what I found and it works for me:
"reveal": {
deps: ["jquery"],
exports: "jQuery.fn.reveal"
}

Configuring require.js for backbone-ui

I am trying to use the backbone-ui library but cannot figure out the require.js configuration to get the modules loaded.
main.js:
requirejs.config({
baseUrl: '/static/js/facebook_report_app/js',
paths: {
backbone: 'lib/backbone'
, underscore: 'lib/underscore'
, jquery: 'lib/jquery'
, laconic: 'lib/laconic'
, moment: 'lib/moment'
, backboneUI: 'lib/backbone-ui/js/backbone_ui'
, menuUI: 'lib/backbone-ui/js/menu'
, textUI: 'lib/backbone-ui/js/text_field'
, text: 'lib/text'
},
shim: {
'lib/underscore': {
exports: '_'
},
'laconic': {
deps: ["jquery"],
exports: "$.el"
},
'lib/backbone': {
deps: ['lib/underscore']
, exports: 'Backbone'
},
'backboneUI': {
deps: ['lib/backbone', 'laconic', 'jquery']
, exports: 'Backbone.UI'
},
'textUI': {
deps: ['jquery', 'lib/backbone', 'backboneUI', 'laconic']
, exports: 'Backbone.UI.TextField'
},
'menuUI': {
deps: ['lib/backbone', 'backboneUI', 'laconic', 'textUI']
, exports: 'Backbone.UI.Menu'
},
'lib/backgrid': {
deps: ['lib/underscore', 'lib/backbone']
, exports: 'Backgrid'
},
'report_app': {
deps: ['lib/underscore', 'lib/backbone', 'lib/backgrid', 'backboneUI']
}
}
});
require([
'facebook_report_app'
],
function(FacebookReportApp) {
window.fbReport = new FacebookReportApp();
});
menu_user.js
define(['jquery', 'lib/backbone', 'backboneUI', 'menuUI', 'laconic'], function(AccountPickerView) {
var AccountPickerView = Backbone.UI.Menu.extend({
el: '.left-nav',
});
return AccountPickerView;
});
When I load this in dev, the console reports "Object [object Object] has no method 'input' ", on line 44 of the text_field.js of the Backbone-UI library.
I suppose my configuration approach is broken to begin with -- I added the menu.js and text_field.js files bc I was getting errors 'Backbone.UI.Menu' and Backbone.UI.TextField' (a requirement of Menu) weren't defined. But there must be a cleaner way to bring in the various files of backbone-ui.
So how do I get rid of the 'no method input' error? Or better configure to use Backbone UI? Or should I be using jQuery UI in the first place? In which case, where do I go to figure out configuration of that?

I got it working, after much fiddling with the following setup:
js/main.js
requirejs.config({
baseURL: 'js',
urlArgs: "bust=" + (new Date()).getTime(),
shim: {
underscore: {
exports: '_'
},
jquery: {
exports: '$'
},
backbone: {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
laconic: {
exports: '$.el'
},
backbone_ui: {
deps: ['underscore', 'jquery', 'backbone', 'laconic', 'moment'],
exports: 'Backbone.UI'
}
},
paths: {
jquery: 'http://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.3/jquery.min',
moment: './lib/moment.min',
laconic: './lib/laconic',
underscore: 'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min',
backbone: 'http://cdnjs.cloudflare.com/ajax/libs/backbone.js/1.0.0/backbone-min',
backbone_ui: './lib/backbone-ui',
crypto: 'http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/md5',
templates: '../templates',
collections: './collections',
models: './models',
}
});
js/views/json.js
define(['jquery','underscore', 'backbone', 'backbone_ui'],
function($,_,Backbone, BBUI){
var JsonView = Backbone.View.extend({
className: "json-item",
initialize: function(data){
var self = this;
this.app = data.app;
this.model = data.model;
this.listenTo(this.model, "change", function(){
console.log("model changed", self.model);
});
this.model.fetch({
success: function(){
self.render();
}
});
},
render: function(){
var self = this;
$(this.el).empty();
for (key in this.model.attributes){
this.el.appendChild(new Backbone.UI.Label({content:key}).render().el);
this.el.appendChild(new Backbone.UI.TextField({model: this.model, content:key}).render().el);
}
this.el.appendChild(new Backbone.UI.Button({content:"save", onClick: function(){self.model.save()}}).render().el);
return this;
}
});
return JsonView;
});
Please note that I import backbone-ui as BBUI and never reference it that way. BBUI.TextField() is a defined function and using it would work as well, but the way Backbone-ui is set up it makes alterations to Backbone, Jquery, and Underscore when it loads. So I figured I just needed it to be run prior to the view getting loaded.

How to use a multiple file library with requireJs

I building a project with requireJs my file structure is the following:
js/
lib/
noty/
layouts/
bottom.js
top.js
...
themes/
default.js
noty.jquery.js
jquery.js
jquery-ui.js
user/
user.js
app.js
And my configuration :
requirejs.config({
baseUrl: 'js/lib',
urlArgs: 'bust=' + (new Date()).getTime(), //only for dev : no-cache
paths: {
user: '../user'
},
shim: {
'jquery-ui': ['jquery'],
'jquery-tmpl': ['jquery'],
'gridy': ['jquery']
}
});
requirejs(['jquery', 'jquery-ui'], function($){
....
});
My concern is about to integrate noty which is a notification plugin that I may use in any modules. This plugin requires to load :
js/lib/noty/noty.jquery.js
js/lib/noty/layout/top.js
js/lib/noty/themes/bottom.js
I'm not sure what is the way to do that?
Concatenate the files ?
Load each file as a dependency? :
requirejs(['jquery', 'jquery-ui', 'noty/noty.jquery.js', 'noty/layout/top.js', etc. ]
Creates some kind of plugin/module for requireJs?
Thanks

or like this:
paths: {
'jquery': 'jquery/1.10.2/jquery',
'noty': 'noty/2.0/jquery.noty',
'noty.themes.default': 'noty/2.0/themes/default',
'noty.layouts.topCenter': 'noty/2.0/layouts/topCenter',
app: '../app',
util: '../util'
},
shim: {
'noty': ['jquery'],
'noty.themes.default': {
deps: ['jquery', 'noty'],
exports: 'jquery'
},
'noty.layouts.topCenter': {
deps: ['jquery', 'noty'],
exports: 'jquery'
}
}

Finally I managed to implement the 3rd solution: I've created a web module that wrap the library in a file named notiy.js :
define(['jquery',
'noty/layouts/topCenter',
'noty/layouts/bottomRight',
'noty/themes/default'],
function($){
$.noty.defaults.timeout = 20000;
return function(type, msg){
var topLayout = 'topCenter',
bottomLayout = 'bottomRight',
layout = {
'alert' : topLayout,
'info' : bottomLayout,
'confirm' : topLayout,
'success' : bottomLayout,
'error' : topLayout,
'warning' : topLayout
};
if(msg && type){
return noty({
text : msg,
layout: layout[type] || topLayout,
type : type
});
}
}
});
I've declared the dependencies in the shim config (to fix the dependency order) in my app.js :
requirejs.config({
baseUrl: 'js/lib',
urlArgs: 'bust=' + (new Date()).getTime(), //only for dev : no-cache
paths: {
user: '../user'
},
shim: {
'jquery-ui' : ['jquery'],
'jquery-tmpl' : ['jquery'],
'gridy' : ['jquery'],
'noty/jquery.noty' : ['jquery'],
'notify' : ['noty/jquery.noty']
}
});
requirejs(['jquery', 'jquery-ui', 'jquery-tmpl', 'notify'], function($, ui, tmpl, notify){
//...
});
Ans it works like a charm!