I got a Mediator-Sandbox library and a Router extension built on top of this library.
The library is built up like this:
(function(window) {
var MedSan = {};
window.MedSan = MedSan;
})(this);
The extension looks like this:
(function(_, Backbone, MedSan) {
MedSan.Router = {};
})(_, Backbone, MedSan);
The requires config to load the extension looks like this:
require.config({
baseUrl: "javascripts",
shim: {
"jquery": {
exports: "$"
},
"underscore": {
exports: "_"
},
"backbone": {
deps: ['jquery', 'underscore'],
exports: "Backbone"
},
"Distribution": {
exports: "Distribution"
},
"Distribution.Router": {
deps: ['underscore', 'backbone', 'Distribution'],
exports: "Distribution"
}
},
/*
map: {
"*": {
"Distribution": "Distribution.Router"
}
},
*/
paths: {
"jquery": "Vendors/jquery",
"underscore": "Vendors/underscore",
"backbone": "Vendors/backbone",
"Distribution": "Distribution/Distribution",
"Distribution.Router": "Distribution/Plugins/Router"
}
});
I now can use my full library with:
require(['Distribution.Router'], function(Distribution) {});
when I uncomment the map configuration so I can use the full loaded module with router extension this way:
require(['Distribution'], function(Distribution) {});
than I am getting a module timeout.
What am I doing wrong?
When you map Distribution to Distribution.Router, you're creating a circular dependency because Distribution.Router also depends on Distribution.
To fix this just add another line overriding the map for Distribution in Distribution.Router only:
map: {
"*": {
"Distribution": "Distribution.Router"
},
"Distribution.Router": {
"Distribution": "Distribution"
}
}
Related
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
How do you load other extensions for a jquery control called 'fancytree' I'm trying to get fancytee to load or include the fancytree.table.js and other extensions that are needed - below is my config
require.config({
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: [
'underscore',
'jquery'
],
exports: 'Backbone'
},
'jquery-ui': {
exports: "$",
deps: ['jquery']
},
'fancytree': {
deps: ['jquery-ui']
},
'alertify': {
deps: ['jquery']
},
'fancytreetable': {
deps: ['jquery', 'fancytree']
}
},
paths: {
'jquery': '../lib/jquery/jquery',
'underscore': '../lib/underscore/underscore',
'backbone': '../lib/backbone/backbone',
'text': '../lib/text/text',
'jquery-ui': '../vendor/jquery-ui/jquery-ui',
'fancytree': [
'../vendor/fancytree/fancytree',
'../vendor/fancytree/fancytree.table'/* this extension here needs to be added but it's not included */
],
'alertify': '../vendor/alertify/alertify'
},
baseUrl: '/js/app',
});
Nikhil Mehta's comment points you in the right direction. Your paths value for fancytree is wrong. You use an array there when you want to provide fallback values for modules. If you give [A, B, C], for instance, if A fails to load, RequireJS tries B and if this fails, tries C. And if all fail, then that's a load failure.
Based on the configuration you show, you'd need:
fancytree: '../vendor/fancytree/fancytree',
fancytreetable: '../vendor/fancytree/fancytree.table'
You already have a shim that establishes that fancytreetable needs fancytree.
Note that unless you are using fairly old versions of Underscore and Backbone, you do not need to specify shim values for them. RequireJS is probably going to just ignore them but it may confuse people reading your code.
Here is how made it work, requirejs with jquery.fancytree-all and latest jquery-ui with AMD support, since working with individual extensions will require a lot of shimming.
onBuildWrite is optional but i prefer it this way
requirejs.config({
paths: {
'jquery': './js/vendor/jquery',
'jquery-ui': './js/vendor/jquery-ui',
'jquery.fancytree': './js/vendor/fancytree/jquery.fancytree-all'
},
shim: {
'jquery.fancytree': {
deps: ['jquery', 'jquery-ui/core', 'jquery-ui/effect', 'jquery-ui/effects/effect-blind', 'jquery-ui/widgets/draggable', 'jquery-ui/widgets/droppable'],
exports: 'jQuery.fn.fancytree'
}
},
onBuildWrite: function (moduleName, path, contents) {
'use strict';
if (moduleName === 'jquery.fancytree') {
contents = 'define( "jquery.fancytree", ["jquery", "jquery-ui/core", "jquery-ui/effect", "jquery-ui/effects/effect-blind", "jquery-ui/widgets/draggable", "jquery-ui/widgets/droppable"], function(jQuery) { ' + contents + '});';
}
return contents;
}
});
// usage
define([
'jquery',
'jquery.fancytree',
'css!./css/fancytree/skin-custom/ui.fancytree.css',
],
function($) {
'use strict';
//
$('#tree').fancytree({
checkbox: true,
source: [{title: 'Node 1'}, {title: 'Node 2',key: 'id2'}]
});
//
});
//
This what I did in main.js :
requirejs.config({
enforceDefine: true,
paths: {
"jquery": "libs/jquery/jquery-min",
"underscore": "libs/underscore/underscore-min",
"backbone": "libs/backbone/backbone-min",
"reveal":"libs/jquery/jquery.reveal"
},
shim: {
"underscore": {
deps: [],
exports: "_"
},
"backbone": {
deps: ["jquery", "underscore"],
exports: "Backbone"
},
"reveal": {
exports: "Reveal"
}
}
});
Uncaught Error: No define call for reveal
http://requirejs.org/docs/errors.html#nodefine
Any idea what could be causing this. Thanks.
Take a look at the API for the enforceDefine property. Your reveal shim does not specify jQuery as a dependency, and the extra property also requires you to export it properly:
"reveal": {
deps: ["jquery"],
exports: "jQuery.fn.reveal"
}
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, '');
}
})
I'm trying to use both Underscore and Underscore.string with RequireJS.
Contents of main.js:
require.config({
paths: {
'underscore': '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min',
'underscore-string': '//cdnjs.cloudflare.com/ajax/libs/underscore.string/2.3.0/underscore.string.min',
},
shim: {
'underscore': {
exports: '_'
},
'underscore-string': {
deps: ['underscore'],
exports: '_s'
},
}
});
var modules = ['underscore-string'];
require(modules, function() {
// --
});
Browser sees the _, but doesn't see the _s - it is undefined.
Ideally i want to have Underscore under _ and Underscore.string under _.str, but _ and _s are fine too. How can i do that?
Versions: RequireJS 2.1.5, Underscore 1.4.4, Underscore.string 2.3.0
Note: Thanks to #jgillich make sure, that paths have two slashes (//cdnjs.cloudfare.com/...), otherwise the browser would think that URL is relative to the server, and Firebug will throw:
Error: Script error
http://requirejs.org/docs/errors.html#scripterror
I found the error. For some reason RequireJS doesn't work with version of Underscore.string from cdnjs.com, so i replaced it with Github version. I guess it has something to do with the commit 9df4736.
Currently my code looks like the following:
require.config({
paths: {
'underscore': '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min',
'underscore-string': '//raw.github.com/epeli/underscore.string/master/dist/underscore.string.min',
},
shim: {
'underscore': {
exports: '_'
},
'underscore-string': {
deps: ['underscore'],
},
}
});
var modules = ['underscore', 'underscore-string'];
require(modules, function(_) {
// --
});
Underscore.string resides in _.str.
Edit: As of 16 July 2013 the CDNJS version is updated with the upstream.
Battling with this for hours before i understand what i was doing wrong
This is what i did wrong
You should not rename the file underscore.string in main.js
even though in my library i did rename the file in paths i name it back to 'underscore.string'
This is how your main.js should look like
require.config({
paths: {
underscore: 'lib/underscore',
'underscore.string' : 'lib/_string' ,
},
shim: {
underscore: {
exports: '_',
deps: [ 'jquery', 'jqueryui' ]
},
'underscore.string': {
deps: [ 'underscore' ]
},
}
....
You could then either add it as dependency with in your shim like i did for my mixin file
shim: {
mixin : {
deps: [ 'jquery', 'underscore', 'underscore.string' , 'bootstrap' ]
},
Or just define it in your different pages like
/*global define */
define([
'underscore.string'
], function ( ) {
it just work now you can access it through _.str or _.string
This is why you should do it this way and not try to name it something else
on line 663 of underscore.string.js
// Register as a named module with AMD.
if (typeof define === 'function' && define.amd)
define('underscore.string', [], function(){ return _s; });
Which means that it will only register it with AMD require JS if you are defining 'underscore.string'
works for my ONLY if I use exact "underscore.string" module name in shim. Seems related to hardcoded name in underscore.string itself
Exempt from underscore.string source code (this branch is executed when require used):
// Register as a named module with AMD.
if (typeof define === 'function' && define.amd)
define('underscore.string', [], function(){ return _s; });
So for me the only working configuration is:
require.config({
paths: {
'underscore': '//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min',
'underscore.string': '//raw.github.com/epeli/underscore.string/master/dist/underscore.string.min',
},
shim: {
'underscore': {
exports: '_'
},
'underscore.string': {
deps: ['underscore'],
},
}
});
var modules = ['underscore', 'underscore.string'];
require(modules, function(_) {
// --
});
Here's a working code using Requirejs "order" plugin, also includes Jquery, and everything loads without any conflict:
requirejs.config({
baseUrl: "assets",
paths: {
order: '//requirejs.org/docs/release/1.0.5/minified/order',
jquery: 'http://code.jquery.com/jquery-2.1.0.min',
underscore: '//underscorejs.org/underscore-min',
underscorestring: '//raw.githubusercontent.com/epeli/underscore.string/master/dist/underscore.string.min',
underscoremixed: 'js/underscore.mixed' // Create separate file
},
shim: {
underscore: { exports: '_' },
underscorestring: { deps: ['underscore'] }
}
});
require(['order!jquery','order!underscoremixed'], function($,_) {
// test
console.log( _.capitalize('capitalized text') );
});
Inside js/underscore.mixed.js put the following...
define(['underscore','underscorestring'], function() {
_.mixin(_.str.exports());
return _;
});
Cheers! :)