We Keep Coding

RequireJS Not Executing all Files

I've designed this application to have a main.js file, which is executed on all pages. Where applicable, I am creating JavaScript files per page. The per-page JS is executing fine, but I notice main.js often only loads on a hard refresh which included with a per-page javascript file. I'll illustrate the setup below:
<script src="/admin/js/require.config.js"></script>
<script src="/admin/js/lib/require.js" data-main="./app/user/form"></script>
require.config.js
var require = {
baseUrl: '/admin/js',
paths: {
main: 'app/main',
bootstrap: 'lib/bootstrap',
"datatables.net": 'lib/jquery.datatables',
datepicker: 'lib/bootstrap-datetimepicker',
dropzone: 'lib/dropzone',
moment: 'lib/moment',
notify: 'lib/bootstrap-notify',
paper: 'lib/paper-dashboard',
jquery: 'lib/jquery',
select: 'lib/bootstrap-select',
sortable: 'lib/Sortable.min',
swal: 'lib/sweetalert2',
switchTags: 'lib/bootstrap-switch-tags',
wizard: 'lib/jquery.bootstrap.wizard.min',
validate: 'lib/jquery.validate.min',
yummySearch: '/yummy/js/yummy-search',
zxcvbn: 'lib/zxcvbn'
},
shim:{
bootstrap:{
deps: ['jquery']
},
validate: {
deps: ['jquery']
},
wizard:{
deps: ['bootstrap']
},
select:{
deps: ['bootstrap']
},
datepicker:{
deps: ['bootstrap','moment']
},
switchTags:{
deps: ['bootstrap']
},
paper: {
deps: ['bootstrap','switchTags']
},
notify: {
deps: ['jquery','bootstrap']
},
"datatables.net": {
deps: ['jquery']
},
main: {
deps: ['paper','notify','moment','datepicker','swal']
}
},
deps: ['main']
};
main.js
require(['jquery','swal','yummySearch','notify'], function($, swal) {
console.log('does not always execute');
});
app/user/form.js
define(['jquery','swal','validate','datatables.net'], function($,swal) {
console.log('will always run when loaded via data-main');
})
I am open to redoing this architecture if there are better ways, but would like to at least figure out this problem I am experiencing.

As far as I know, deps property in the requirejs config is an array of dependencies to load. Useful when require is defined as a config object before require.js is loaded, and you want to specify dependencies to load as soon as require() is defined. Saying that, it only happens once, exactly when the require.js is loaded and is the reason your main.js only execute once.
Note that using deps is just like doing a require([]) call to any other module, but done as soon as require.js is loaded and the loader has processed the configuration.
If you want your main.js to run on every page, then you will need to manually required
app/user/form.js
define(['main','jquery','.... other deps'], function(main, $, others) {
console.log('main will always run');
})

Requirejs Optimizer not compiling

I have been using requirejs and am having trouble getting the optimization tool to work. All I want to do is optimize my javascript files into one script file with all my dependencies included.
All my file are in the one js/ folder and I have a sub folder vendors/
I have a config file which looks like this(config.js):
requirejs.config({
baseUrl: ".",
out: "main-built.js",
deps: ["main"],
paths: {
jquery: "vendor/jquery", // v.1.10.2
bootstrap: "vendor/bootstrap",
ajaxform: "vendor/ajaxform",
skrollr: "vendor/skrollr",
jqueryform:"vendor/jqueryform"
},
shim: {
bootstrap: {
deps: ["jquery"],
exports: "bootstrap",
},
ajaxform: {
deps: ["jquery"],
exports: "ajaxform",
},
jqueryform: {
deps: ["jquery"],
exports: "jqueryform",
}
}
});
And I have an main javascript file (main.js) which looks like this:
if (typeof jQuery === 'function') {
define('jquery', function () { return jQuery; });
}
define(["jquery","bootstrap", "ajaxform","skrollr"],
function($, bootstrap, ajaxform, skrollr) {
//have other code here
});
I also created a build file:
({
baseUrl: ".",
paths: {
jquery: "vendor/jquery", // v.1.10.2
bootstrap: "vendor/bootstrap",
ajaxform: "vendor/ajaxform",
skrollr: "vendor/skrollr",
jqueryform:"vendor/jqueryform"
},
shim: {
bootstrap: {
deps: ["jquery"],
exports: "bootstrap",
},
ajaxform: {
deps: ["jquery"],
exports: "ajaxform",
},
jqueryform: {
deps: ["jquery"],
exports: "jqueryform",
}
},
name: "main",
out: "main-built.js"
})
All the build file does is compress the main.js file itself and doesn't include all needed files.
I've been trying to get this working on and off for weeks and can't seem to get it right so any help would be REALLY appreciated.
Thanks

Try adding a modules entry to your build file with your main module, as in:
modules: [
{ name: 'main' }
]
You can see all the options for the build file here: https://github.com/requirejs/r.js/blob/master/build/example.build.js

Why I have to use 'include' again in grunt-requirejs to optimize into a single js file?

I'm trying to use grunt-requirejs to optimize my requirejs project into a single production js file. However, I'm not sure if my Gruntfile.js is correct because I have to specify which model to include during the optimization again, which seems wrong to me as I specify mainConfigFile already. I thought it's going to read everything from my requirejs file. I asked this because I have a lot of modules and I don't want to DRY.
Here's my Gruntfile.js
requirejs : {
compile : {
options: {
almond: true,
baseUrl : 'src/Web/Scripts',
mainConfigFile : 'src/Web/Scripts/main-new.js',
out: 'src/Web/Scripts/out.js',
optimize: 'uglify2',
include: ['main-new',
'app/app.js',
'app/viewmodels/home/home.mobile.js',
'zepto',
'hammer',
'zepto-hammer',
'zepto-dragswipe',
'knockout',
'knockout-validation',
'knockout-postbox',
'knockout-mapping',
'knockout-notification',
'q',
'underscore'
]
}
}
},
And this is my main-new.js file
requirejs.config({
baseUrl: '/m/Scripts',
paths: {
'jquery': 'vendors/jquery/jquery-1.10.2',
'jquery-cookie': 'vendors/jquery/jquery.cookie-1.4.1',
'zepto': 'vendors/zepto/zepto',
'hammer': 'vendors/hammer/hammer',
'zepto-hammer': 'vendors/zepto/zepto.hammer',
'zepto-dragswipe': 'vendors/zepto/zepto.dragswipe',
'knockout': 'vendors/knockout/knockout-3.1.0',
'knockout-validation': 'vendors/knockout/knockout.validation',
'knockout-postbox': 'vendors/knockout/knockout-postbox',
'knockout-mapping': 'vendors/knockout/knockout.mapping',
'knockout-notification': 'vendors/knockout/knockout-notification-1.1.0',
'viewmodels': 'app/viewmodels',
'service': 'app/services',
'config': 'app/config',
'helpers': 'app/helpers',
'q': 'vendors/q/q-0.9.6',
'underscore': 'vendors/underscore/underscore-min'
},
shim: {
'knockout-validation': ['knockout'],
'knockout-mapping': ['knockout'],
'knockout-postbox': ['knockout'],
'knockout-notification': ['knockout'],
'jquery-cookie': ['jquery'],
'hammer': ['zepto'],
'zepto-hammer': ['zepto', 'hammer'],
'zepto-dragswipe': ['zepto', 'hammer'],
'zepto': {
exports: 'Zepto'
},
'underscore': {
exports: '_'
}
}
});

In include section you should put modules that is required dynamically like:
require(['path/' + moduleName], function() { ... })
Because r.js can't predict at build time what you will be requiring in runtime.
Everything else should be resolved by dependency arrays in your modules.

Require.js and r.js include all dependencies even of submodules

I'm using require.js for the first time and all is working pretty for the moment. However, I started wanting to make a build. The idea is to create one file with ALL my js and templates. However, every time I use r.js it just includes the dependencies of my main module.
here is my app.build.js:
({
appDir: "public/javascripts",
baseUrl: ".",
dir: "build",
paths: {
"hbs": "lib/hbs",
"jquery": "lib/jquery",
"Handlebars": "lib/Handlebars",
"Backbone": "lib/backbone",
"underscore": "lib/underscore",
"bootstrap": "lib/bootstrap.min.js"
},
modules: [{name: "main"}],
shim: {
"bootstrap": {
deps: ["jquery"],
exports: "$.fn.popover"
},
underscore: {
exports: '_'
},
'Handlebars': {
exports: 'Handlebars'
},
Backbone: {
deps: ["underscore", "jquery"],
exports: "Backbone"
}
}})
the beginning of main.js:
require.config({
paths: {
"hbs": "lib/hbs",
"Handlebars": "lib/Handlebars",
"Backbone": "lib/backbone",
"underscore": "lib/underscore",
"jquery": "lib/jquery",
"bootstrap": "lib/bootstrap.min.js"
},
hbs: {
disableI18n: true
},
shim: {
"bootstrap": {
deps: ["jquery"],
exports: "$.fn.popover"
},
underscore: {
exports: '_'
},
'Handlebars': {
exports: 'Handlebars'
},
Backbone: {
deps: ["underscore", "jquery"],
exports: "Backbone"
}
}
});
require(['jquery', 'Backbone', 'videos'], function($, Backbone, Videos) { // Whatever });
In this case the final file created in my build 'main.js' only contains: jquery, underscore, backbone and videos. How can I make sure it also includes the dependencies of the module videos namely: the template 'hbs!template/videos/show'. How can I also make sure that bootstrap.min.js is also added even though it's not required anywhere?
Finally should I remove the require.config as it will define paths that are not supposed to be anymore as all the modules are in the final file?

To have the optimizer include all the nested dependencies, include this option in your build file or command line:
{
findNestedDependencies: true
}
This makes it work as you'd expect, and you won't have to include all your dependencies in your main file. It's kind of a secret ... I never saw this in the docs but I read it on a random blog somewhere.

In you app.build.js include link to your main config file and you can remove specified modules, this should include all dependencies used by main module.
({
...
mainConfigFile: 'main.js',
...
})
You may also skip paths and shim, since that is already specified in main. Bellow is sample config that I'm using in one of my projects and works like a charm:
({
name: 'main',
baseUrl: '../',
// optimize: 'none',
optimize: 'uglify2',
exclude: ['jquery'],
paths: {
requireLib: 'require'
},
mainConfigFile: '../main.js',
out: '../main.min.js',
// A function that if defined will be called for every file read in the
// build that is done to trace JS dependencies.
// Remove references to console.log(...)
onBuildRead: function (moduleName, path, contents) {
return contents;
// return contents.replace(/console.log(.*);/g, '');
}
})

require.js and r.js dependencies

My app has been working fine but today I decided to give r.js a swirl.
Right now my tree(part of it) looks like
index.html
assets
js
require.js
r.js
main.js
components
underscore.js
jquery.js
backbone.js
jqueryuijs
models
election.js
collections
elections.js
views
app.js
election.js
in my index.html file I have
<script data-main="assets/js/main" src="assets/js/require.js"></script>
and this is main.js
require.config({
paths: {
jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min',
underscore: 'components/underscore/underscore-min',
backbone: 'components/backbone/backbone-min',
jqueryui: 'components/jqueryui/jquery-ui-1.10.1.custom.min'
},
shim: {
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'jqueryui': ['jquery']
}
});
require(['views/app'], function(App) {
var router = Backbone.Router.extend({
routes: {
'': 'root',
'year(/:year)': 'year'
},
root: function() {
new App();
},
year: function(year) {
new App({
year: year
});
}
});
r = new router();
Backbone.history.start({
// pushState: true
});
});
and in my modules I refer to my files like assets/js/views/election.js or assets/js/models/election.js
but when I run r.js with this build.js
({
// baseUrl: "assets/",
paths: {
jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min',
underscore: 'components/underscore/underscore-min',
backbone: "components/backbone/backbone-min",
jqueryui: 'components/jqueryui/jquery-ui-1.10.1.custom.min'
},
name: "main",
out: "main-built.js"
})
I get Error: ENOENT, no such file or directory '/Users/alex/Dropbox/www/animated-elections/assets/js/assets/js/collections/elections.js'. I get what it means by I don't understand why it is adding another assets/js to my paths.

I believe require.js is supposed to go in the same folder as the main file, ie. next to the assets folder instead of inside it.

r.js is inside your app directory, instead of being a sibling to it, as specified in the example setup.
I haven't tested this but r.js is probably assuming that any module calls should be relative to where it's located.

Add in the build.js file this codes.
baseUrl: ".",
paths: {
jquery: 'http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min',
underscore: 'components/underscore/underscore-min',
backbone: "components/backbone/backbone-min",
jqueryui: 'components/jqueryui/jquery-ui-1.10.1.custom.min',
'views/app': 'empty:',
'views/election': 'empty:',
//and so with others
},
name: "main",
out: "main-built.js"
Regards.-