r.js with text files - requirejs

Question

I have a project at http://gifcept.com which is using require.js. I am in the process of optimicing the resources with r.js but I can't manage to get it working when I set inlineText: true.
I have the following tree of directories for testing purposes with r.js
└── uncompiled
├── js
│   ├── bookmarklet
│   ├── collections
│   ├── libs
│   │   ├── backbone
│   │   ├── jquery
│   │   ├── jquery.fileupload
│   │   ├── jquery.iframe-transport
│   │   ├── jquery.jscrollpane
│   │   ├── jquery.mousewheel
│   │   ├── jquery.scrolltofixed
│   │   ├── jquery.simple-dialog
│   │   ├── jquery.tag-it
│   │   ├── jquery.timeago
│   │   ├── jquery.ui
│   │   ├── modernizr
│   │   ├── require
│   │   └── underscore
│   ├── models
│   └── views
└── templates
My build.js file looks as follows
({
dir: "compiled",
baseUrl: "uncompiled/js",
stubModules: ['text'],
findNestedDependencies: true,
preserveLicenseComments: false,
optimizeAllPluginResources: true,
removeCombined: true,
optimize: "uglify",
inlineText: true,
modules: [
{
name: "main"
}
],
paths: {
jquery: 'libs/jquery/jquery-2.0.0',
underscore: 'libs/underscore/underscore-1.4.4',
backbone: 'libs/backbone/backbone-1.0.0',
modernizr: 'libs/modernizr/modernizr-2.6.2',
jqueryui: 'libs/jquery.ui/jquery.ui-1.10.3',
jquerytagit: 'libs/jquery.tag-it/jquery.tag-it-2.0',
jqueryiframetransport: 'libs/jquery.iframe-transport/jquery.iframe-transport-1.7',
jqueryfileupload: 'libs/jquery.fileupload/jquery.fileupload-5.31.6',
jquerysimpledialog: 'libs/jquery.simple-dialog/jquery.simple-dialog-0.0.1',
jqueryscrolltofixed: 'libs/jquery.scrolltofixed/jquery.scrolltofixed',
jquerytimeago: 'libs/jquery.timeago/jquery.timeago-1.3.0',
jquerymousewheel: 'libs/jquery.mousewheel/jquery.mousewheel',
jqueryjscrollpane: 'libs/jquery.jscrollpane/jquery.jscrollpane'
},
})
My main.js file looks like this
require.config({
baseUrl: "/js",
paths: {
jquery: 'libs/jquery/jquery-2.0.0',
underscore: 'libs/underscore/underscore-1.4.4',
backbone: 'libs/backbone/backbone-1.0.0',
modernizr: 'libs/modernizr/modernizr-2.6.2',
jqueryui: 'libs/jquery.ui/jquery.ui-1.10.3',
jquerytagit: 'libs/jquery.tag-it/jquery.tag-it-2.0',
jqueryiframetransport: 'libs/jquery.iframe-transport/jquery.iframe-transport-1.7',
jqueryfileupload: 'libs/jquery.fileupload/jquery.fileupload-5.31.6',
jquerysimpledialog: 'libs/jquery.simple-dialog/jquery.simple-dialog-0.0.1',
jqueryscrolltofixed: 'libs/jquery.scrolltofixed/jquery.scrolltofixed',
jquerytimeago: 'libs/jquery.timeago/jquery.timeago-1.3.0',
jquerymousewheel: 'libs/jquery.mousewheel/jquery.mousewheel',
jqueryjscrollpane: 'libs/jquery.jscrollpane/jquery.jscrollpane'
},
shim: {
jquery: {
exports: '$'
},
underscore: {
exports: '_'
},
backbone: {
exports: 'Backbone',
deps: ['underscore', 'jquery']
},
modernizr: {},
jqueryui: {
deps: ['jquery']
},
jquerytagit: {
deps: ['jquery', 'jqueryui']
},
jqueryiframetransport: {
deps: ['jquery']
},
jqueryfileupload: {
deps: ['jquery', 'jqueryui']
},
jquerysimpledialog: {
deps: ['jquery']
},
jqueryscrolltofixed: {
deps: ['jquery'],
},
jquerytimeago: {
deps: ['jquery'],
},
jquerymousewheel: {
deps: ['jquery'],
},
jqueryjscrollpane: {
deps: ['jquery', 'jquerymousewheel'],
}
}
});
require([
// Load our app module and pass it to our definition function
'app',
'events',
'modernizr',
'jquery',
'jqueryscrolltofixed',
'jqueryui',
'jquerytagit',
'jquerysimpledialog',
'jqueryiframetransport',
'jqueryfileupload',
'jquerytimeago',
'jquerymousewheel',
'jqueryjscrollpane'
], function(Application, Events){
...
...
});
An example of a define that uses text resources would be
define([
'underscore',
'backbone',
'helpers',
'events',
'router',
'views/destroyableView',
'text!/templates/comment.html'
], function(_, Backbone, Helpers, Events, Router, DestroyableView, CommentTemplate){
...
...
});
I have been able to get a compiled file both turning inlineText: false in the build.js and getting rid of the 'text!*' definitions. The error I get when inlineText is set to true and I keep the text resources definitions is the following:
Tracing dependencies for: main
RangeError: Maximum call stack size exceeded
In module tree:
main
app
views/appView
views/menuView
views/notificationCollectionView
views/notificationView
views/viewGifPopupView
views/commentCollectionView
views/commentView
text
Error: RangeError: Maximum call stack size exceeded
In module tree:
main
app
views/appView
views/menuView
views/notificationCollectionView
views/notificationView
views/viewGifPopupView
views/commentCollectionView
views/commentView
text
Any help would be really appreciated.

Answer 1

The only thing I can is to provide the small working example:
main.js
require.config({
paths : {
jquery : 'jquery-2.0.3',
backbone: 'backbone',
underscore: 'underscore'
},
shim : {
underscore: {exports: '_'},
backbone: {deps: ['underscore'], exports: 'Backbone'}
},
map : {
'*' : {
'text' : 'text' // real path tot text.js plugin
}
}
});
require(['jquery', 'backbone', 'text!./partials/view.html'], function($, Backbone, view) {
console.log('Type of $: ' + typeof $);
console.log('Type of Backbone: ' + typeof Backbone);
var element = $(view);
$('body').append(element);
});
index-prod.html
<!doctype html>
<html>
<head></head>
<body>
<script src="require.js"></script>
<script src="main-built.js"></script>
</body>
</html>
build.js
({
baseUrl : ".",
name : 'main',
mainConfigFile : "main.js",
out : "main-built.js",
findNestedDependencies : true,
inlineText : true,
stubModules: ['text'],
preserveLicenseComments: false,
optimizeAllPluginResources: true,
removeCombined: true,
optimize: "uglify",
})
index.html
<!doctype html>
<html>
<head></head>
<body>
<script data-main="main" src="require.js"></script>
</body>
</html>
partials/view.html
<div>Some view</div>
The build process goes without errors and text resource is inlined in main-built.js