Develop Reference

RequireJS Optimizer - what does it actually do?

I was under the impression that the RequireJS Optimizer would look through the defined dependencies and gather up all of the referenced js files in an application and bundle them up into a single, large js file.
You'd then be able to reference that single file in your html script include.
But this doesn't seem to be the case. When I run this, I get a large file, but it includes the original main.js file that includes paths to files in a directory structure.
What is the point of that? Why does the new large file contain paths outside of itself if everything needed is contained within? It seems like the optimizer would rewrite the paths to point to "./" or something.
When I bundle up the entire app and reference that in the page, I'm getting errors about missing files that ARE included in the large js file:
Uncaught object require.js:70
GET http://localhost/ui/js/modules/mod_limeLight.js 404 (Not Found) require.js:729
Uncaught Error: Script error for: mod_limelight
http://requirejs.org/docs/errors.html#scripterror
build.js:
({
baseUrl: "./src/ui/scripts",
name: "main",
mainConfigFile : "src/ui/scripts/main.js",
out: "dist/ui/scripts/main-built.js"
})
main.js
'use strict';
require.config({
"paths": {
"jquery": "libs/jquery-1.11.0.min",
"twitter_bootstrap": "../bower_components/bootstrap/dist/js/bootstrap.min",
"respondjs": "../bower_components/respond/dest/respond.min",
"debouncejs": "libs/dw-debounce",
"carousel": "libs/jquery.carouFredSel-6.2.1-packed",
"swipe": "libs/jquery.touchSwipe.min",
"app": "app",
"OOo_config": 'libs/oo_conf_entry-ck', // Opinion Lab pop-up
//modules
"addthis": "//s7.addthis.com/js/300/addthis_widget",
"mod_addThis": "modules/mod_AddThis",
"limelight": "//assets.delvenetworks.com/player/embed",
"mod_limelight": "modules/mod_limeLight"
},
"shim": {
"twitter_bootstrap": ["jquery"],
"carousel": ["jquery"],
"swipe": ["jquery"],
"packeryjs": ["jquery"]
}
});
require([
"jquery",
"app",
"OOo_config",
"respondjs",
"mod_addThis",
"mod_limelight"
], function ($, app) {
app.init();
});
example module starts off like:
define([
"jquery", "debouncejs", "limelight"
],
function ($) {
'use strict';
var playerElement = ...
});
Then running:
node r.js -o build.js
What am I missing? Why is it trying to fetch files that are contained in that large js file?
Thanks,
Scott

It identifies the included modules using their usual paths, because that’s simple and unambiguous, and it works. The files aren’t fetched, of course.

How do I tell RequireJS to look in a subdir for certain modules?

I am not sure if this is possible, I've tried with a wildcard * in the paths config.
I want to load requested modules named jquery/* from subdir libs/jquery/src, but other files should be loaded in relation to baseUrl. This is what I've tried:
({
baseUrl: ".",
name: "main",
out: "main.build.js",
paths: {
"jquery/*": "libs/jquery/src"
}
})
Is this possible, one way or another?
Example:
require([
"jquery/ajax.js",
"view/table.js"
], function(tableView){
var t = new tableView;
return {
tableView: tableView
};
});
Would load jquery/ajax.js from ./libs/jquery/src/ajax.js and view/table.js from ./view/table.js.
Edit
I have also tried with this paths config:
paths: {
"jquery": "libs/jquery/src"
}
In both cases I get this error: Error: Error: ENOENT, no such file or directory 'Development/rjs/jquery/ajax.js' while the expected path to look at is Development/rjs/libs/jquery/src/ajax.js

There is no actual pattern matching. However, RequireJS can match the start of a path to replace it with something else so you could do:
paths: {
"jquery": "libs/jquery/src"
}
With this, then if you do:
require(["jquery/foo"], ...);
RequireJS will seek libs/jquery/src/foo.js. Of course this will be problematic if you happen to want to load the whole of jQuery as jquery.
This won't work if you put extensions in your dependencies. You have to remove the .js from your module names, otherwise RequireJS treats the name as a literal path and won't go through paths.

RequireJs - Try to load a second time a library using the root path instead of the specified in config.path

I'm quite new to requirejs and I'm getting headaches trying to find the following issue: requirejs is loading twice handlebars.js. First time it looks in the right path for the library, but don't know why it looks for that file a second time but this time it does not care about the config path specified. Does anyone have any clue about possible reasons?
require.config({
paths: {
"jquery": "lib/jquery-1.9.1",
"underscore": "lib/underscore.min",
"handlebars":"lib/handlebars.min",
"jquery-ui":"lib/jquery-ui",
"json2":"lib/json2",
"auth_component":"lib/modules/Authentication",
"playlist_page":"pages/playlists"
},
shim: {
'underscore': {
exports: '_'
},
'handlebars': {
exports: 'Handlebars'
},
'json2':{
exports: 'JSON'
},
'jquery-ui': {
deps: ['jquery'],
exports: '$'
}
}
});
This is kind of the output i get in the console:
...
**/lib/handlebars.min.js GET 200 application/javascript require.js:1881**
/lib/underscore.min.js GET 200 application/javascript require.js:1881
/lib/underscore-min.map GET 404 text/html Authentication.js:7
**handlerbar.js GET 404 text/html require.js:1881 471 B Pending**
As you can see, the first handlebar is retrieved from the lib directory. The second one is being tried from the root folder. Why?

It't not loading it twice, the second file its seems to be trying to load is handlerbar.js and not handlebar.js.
I suggest you look into your folder structure and try get rid of the file. Or perhaps you misspelt the handlebar when you tried to load it as a dependency

Require JS is ignoring my config

I'm having pretty simple directory structure for scripts:
/js/ <-- located in site root
libs/
jquery-1.10.1.min.js
knockout-2.2.1.js
knockout.mapping.js
models/
model-one.js
model-two.js
...
require.js
config.js
Since the site engine uses clean URLs I'm using absolute paths in <script>:
<script type="text/javascript" data-main="/js/config.js" src="/js/require.js"></script>
RequireJS config:
requirejs.config({
baseUrl: "/js/libs",
paths: {
"jquery": "jquery-1.10.1.min",
"knockout": "knockout-2.2.1",
"komapping": "knockout.mapping"
}
});
Somewhere in HTML:
require(["jquery", "knockout", "komapping"], function($, ko, mapping){
// ...
});
So the problem is that RequireJS completely ignores baseUrl and paths defined in config file. I get 404 error for every module required in the code below. I see in browser console that RequireJS tries to load these modules from /js/ without any path translations:
404: http://localhost/js/jquery.js
404: http://localhost/js/knockout.js
404: http://localhost/js/komapping.js
However after the page is loaded and the errors are shown I type in console and...
> require.toUrl("jquery")
"/js/libs/jquery-1.10.1.min"
Why so? How to solve this problem?
It's my first experience using RequireJS, so I'm feeling like I've skipped something very simple and obvious. Help, please.
Update
Just discovered this question: Require.js ignoring baseUrl
It's definitely my case. I see in my Network panel that config.js is not completely loaded before require(...) fires own dependency loading.
But I don't want to place my require(...) in config because it is very specific for the page that calls it. I've never noticed such problem with asynchronicity in any example seen before. How do authors of these examples keep them working?

Solved.
The problem was that config file defined in data-main attribute is loaded asynchronously just like other dependencies. So my config.js accidentally was never completely loaded and executed before require call.
The solution is described in official RequireJS API: http://requirejs.org/docs/api.html#config
... Also, you can define the config object as the global variable require before require.js is loaded, and have the values applied automatically.
So I've just changed my config.js to define global require hash with proper configuration:
var require = {
baseUrl: "/js/libs",
paths: {
"jquery": "jquery-1.10.1.min",
"knockout": "knockout-2.2.1",
"komapping": "knockout.mapping"
}
};
and included it just BEFORE require.js:
<script type="text/javascript" src="/js/config.js"></script>
<script type="text/javascript" src="/js/require.js"></script>
This approach allows to control script execution order, so config.js will always be loaded before next require calls.
All works perfectly now.

Fixed the issue.
My config was being loaded asynchronously, and therefore the config paths weren't set before my require statement was being called.
As per the RequireJS docs Link here, I added a script call to my config before the require.js call. And removed the data-main attribute.
var require = {
baseUrl: '/js',
paths: {
'jquery': 'vendor/jquery/jquery-2.0.3.min',
'picker': 'vendor/pickadate/picker.min',
'pickadate': 'vendor/pickadate/picker.date.min'
},
shim: {
'jquery': {
exports: '$'
},
'picker': ['jquery'],
'pickadate': {
deps: ['jquery', 'picker'],
exports: 'DatePicker'
}
}
}
All is now working

require.js cannot find jquery.js

We already have a AMD implementation with require.js which is being used for a long time and now team has decided to use r.js optimizer to optimize the build. I am following the steps but I think I am missing something:
We have require.config which looks like the following:
require.config({
waitSeconds : 15,
baseUrl: window.rootPath + 'scripts',
paths: {
jquery: 'empty:',
jqueryui: 'empty:',
recaptcha: '//www.google.com/recaptcha/api/js/recaptcha_ajax',
maxmind: '//j.maxmind.com/app/geoip',
enduser: '/enduser/scripts/system',
cookies: '/enduser/scripts/system/cookies',
errorhandler: '/enduser/scripts/system/errorhandler',
underscore: '/enduser/scripts/underscore',
blockui: '/enduser/scripts/jquery.blockui',
messaging: '/enduser/scripts/system/messaging',
jgrowl: '/enduser/scripts/jquery.jgrowl',
knockout: 'knockout-latest.debug',
kobindings: '/enduser/scripts/system/bindings',
async: 'plugins/require/async',
depend: 'plugins/require/depend',
font: 'plugins/require/font',
goog: 'plugins/require/goog',
image: 'plugins/require/image',
json: 'plugins/require/json',
noext: 'plugins/require/noext',
mdown: 'plugins/require/mdown',
propertyParser: 'plugins/require/propertyParser',
markdownConverter: 'lib/Markdown.Converter'
},
priority: ['jquery']
});
require(["main"]);
Please note that it has CDN paths instead of "empty". But I replaced empty there after reading some threads online. I am running following command on that:
node -o name="filepath" output="output file path"
It's saying tracing dependencies and then it throws an error saying it did not find jquery.js. Any suggestions?

Well basically the solution to this was to include paths.jquery=empty: at the end of the command. so my command looks like node -o name="filepath" output="output file path" paths.jquery=empty:. This also applies to any CDN that you are using including Jquery.