Develop Reference

Require JS, Loading Libraries through CDN fails

I have read the answer to this question require js loading scripts from cdn fail. But in my case it does not help. I have a require JS setup and I want to use CDN to load my libraries.
The Require JS documentation says below is the right way to load libs from CDN with a fallback to local files.
requirejs.config({
//To get timely, correct error triggers in IE, force a define/shim exports check.
enforceDefine: true,
paths: {
jquery: [
'http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min',
//If the CDN location fails, load from this location
'lib/jquery'
]
}
});
require(['jquery'], function ($) {
});
I am using the same method but I get an error instead, below is my code
requirejs.config({
baseUrl: location.protocol + '//' + location.host + '/app',
waitSeconds: 0,
paths: {
'jquery': ['https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-alpha1/jquery.min','/assets/js/vendor/jquery'],
'jqueryPjax': '/assets/js/vendor/jquery.pjax',
'jqueryUI': '/assets/js/vendor/jquery-ui.min',
'jqueryMousewheel': '/assets/js/jquery.mousewheel',
'jScrollPane': '/assets/js/jquery.jscrollpane.min',
'fastclick': '/assets/js/vendor/fastclick',
'jquerySlidebars': '/assets/js/jquery.slidebars.min',
'imagesLoaded': '/assets/js/imagesloaded.pkgd.min',
'fancyBox': '/assets/js/jquery.fancybox.pack',
'fancyBoxThumb': '/assets/js/jquery.fancybox-thumbs',
'text': '/assets/js/vendor/text',
'chosen': '/assets/js/vendor/chosen',
'bb': '/assets/js/vendor/backbone-min',
'underscore': '/assets/js/vendor/underscore-min',
'angular': '/assets/js/angular.min',
'ventFactory': 'base/ventFactory',
'util': 'base/util',
'dom': 'base/dom',
'actionHandler': 'base/actionHandler',
'ajax': 'base/ajax'
},
shim: {
'jquery': {
exports: 'jQuery'
},
'jqueryUI': {
deps: ['jquery']
},
'angular': {
exports: 'angular'
},
'jqueryPjax': {
deps: ['jquery'],
exports: 'jQuery.fn.pjax'
},
'jqueryMousewheel': {
deps: ['jquery'],
exports: 'jQuery.fn.mousewheel'
},
'jScrollPane': {
deps: ['jqueryMousewheel'],
exports: 'jQuery.fn.jScrollPane'
},
'jquerySlidebars': {
deps: ['jquery'],
exports: 'jquerySlidebars'
},
'fancyBox': {
deps: ['jquery'],
exports: 'fancyBox'
},
'fancyBoxThumb': {
deps: ['jquery', 'fancyBox'],
exports: 'fancyBoxThumb'
},
'chosen': {
deps: ['jquery'],
exports: 'chosen'
}
}
});
requirejs(['jquery', 'app'], function($, app) {
$(function() {
app.start();
});
});
I have just made the changes for Jquery as of now and I am giving both CDN URL and local path but when I load my page I get an error
TypeError: $el.siblings is not a function
Adding on
I am using Require JS for loading my libs but then at the production I am using almond, which combines all modules into one single file, so has this something to do with the error ?
Any help on this is highly appreciated. Thanks

Adding on I am using Require JS for loading my libs but then at the production I am using almond, which combines all modules into one single file, so has this something to do with the error ?
Yes, it does. Almond cannot do dynamic loading. In other words, everything you want Almond to load must be into a single bundle of modules. You cannot use a CDN with Almond.
"No dynamic loading" is the first restriction in its list of restrictions.

How to optimize ember-data with r.js

I recently switched to ember-data#canary, then r.js started failing.
[Error: Error: ENOENT, no such file or directory
'/scripts/lib/ember-data/ember-data/core.js'
In module tree:
app/main
app/app
ember-data
at Object.fs.openSync (fs.js:427:18)
]
This is the build configuration file
`File: build.js`
var config = {
mainConfigFile: '/scripts/common.js',
}
This is the requirejs configuration file
requirejs.config({
paths: {
ember: 'ember/ember',
jquery: 'jquery/dist/jquery',
requirejs: 'requirejs/require',
handlebars: 'handlebars/handlebars',
'ember-data': 'ember-data/ember-data',
},
shim: {
ember: {
deps: [
'handlebars',
'jquery'
],
exports: 'Ember'
},
'ember-data': {
deps: [
'ember'
],
exports: 'DS'
},
}
});
This is how i use ember-data:
define(['ember', 'ember-data'], function(Ember, DS) {
});
You can see the ember-data canary builds here.

This bug have meet from ember-data 1.0.0-beta.9, because in this version has been updated function require in sources. You can revert to beta.8 or try to fix this problem with plugin derequire (grunt-derequire, gulp-derequire).
I've fix it with this task:
gulp.task('build-derequire', function() {
return gulp.src([paths.src.common + '/bower_components/**/ember-data*.js'])
.pipe($.derequire([
{
from: 'require',
to: '_dereq_'
},
{
from: 'define',
to: '_defi_'
}
]))
.pipe(gulp.dest(paths.dev_dist + '/scripts/lib'));
});

How to load JSON.js library with Require JS in order to make a Backbone app work in IE7?

I have managed to make my Backbone app work with IE8 - IE Edge... Yey:)
The last stone is IE7 - I get the following Backbone error:
'JSON' is undefined - file: backbone.js
And there is some part of the backbone library code highlighted by IE's console:
s.data=JSON.stringify(i.attrs||e.toJSON(i)
From what I read, I have to load JSON2 or JSON3 library because IE7 does not have it.
Ok, googled and go the following library - JSON 3:
http://cdnjs.cloudflare.com/ajax/libs/json3/3.2.6/json3.min.js
Now, I use require js to load my application, and I have no idea how to integrate this with my app config.
What are it's dependencies, what does it export?
Here is my config for require js:
/**
* Config.
*/
require.config({
paths: {
"jquery" : "libs/jquery",
"underscore" : "libs/underscore",
"backbone" : "libs/backbone",
"text" : "libs/require/text",
"global" : "libs/global",
templates: '../templates'
},
shim: {
backbone: {
deps: ["underscore", "jquery"],
exports: "Backbone"
},
underscore: {
exports: '_'
},
text : {
exports : 'text'
}
},
global : {
deps: ["jquery"],
exports : 'Global'
}
});
require([
'jquery',
'underscore',
'backbone',
'router',
'global'
], function ($, _, Backbone, Router) {
// Compatibility override, add a close function for the Backbone views.
var router = new Router();
Backbone.history.start();
});
Any ideas?

First add the json library to your path config:
paths: {
"json": "http://cdnjs.cloudflare.com/ajax/libs/json3/3.2.6/json3.min.js",
"jquery" : "libs/jquery",
"underscore" : "libs/underscore",
"backbone" : "libs/backbone",
"text" : "libs/require/text",
"global" : "libs/global",
templates: '../templates'
},
The json library has no dependencies and exports a global variable JSON. You will need to make the backbone library depend on the json library, and load the JSON library with a shim config. See below:
shim: {
json: {
exports: 'JSON'
},
backbone: {
deps: ["underscore", "jquery", "json"],
exports: "Backbone"
},
underscore: {
exports: '_'
},
text: {
exports: 'text'
}
}

Using moment.twitter.js with requirejs

I'm using momentjs for my backbone project with requirejs. Everthing works fine the following way
require.config({
baseUrl : 'js/',
urlArgs: 'bust=' + ( new Date() ).getTime(),
paths: {
jquery : 'libs/jquery-2.0.3.min',
underscore : 'libs/underscore-min',
backbone : 'libs/backbone-min',
moment : 'libs/moment-2.3.1.min',
momenttweet : 'libs/moment.twitter',
},
shim: {
underscore: {
exports: '_'
},
backbone: {
deps: ['jquery', 'underscore'],
exports: 'Backbone'
},
moment: {
exports: 'moment'
},
momenttweet: {
deps: ['moment'],
exports: 'moment'
}
}
});
The above config breaks when I build using r.js to get .min file
Any solution to make it work.
Source of Moment.twitter
https://github.com/SpiderStrategies/moment.twitter
Or any idea how to make moment.twitter AMD Compatible

I tried wrapping up the moment.twitter within define call and removed the momemnt.twitter from the dependency and the shim
define([
'moment'
], function( moment ) {
var second = 1e3, minute = 6e4, hour = 36e5, day = 864e5, week = 6048e5;
var formats = {
seconds: {
short: 's',
long: ' sec'
...
...
...
return moment;
});
and include the above file as a dependency in files where the moment.twitter is required and call it as moment.twitterShort();

How to mixin Underscore plugins in RequireJS?

What is the right way to execute code on Underscore when it gets loaded? I am trying to execute the below code to extend the _ exported namespace automatically when modules require it:
_.mixin(_.str.exports());
The docs are a bit vague but I think I put it in the shim init section? I tried the below but I can't even get a breakpoint to hit in the init:
require.config({
paths: {
jquery: 'libs/jquery/jquery.min',
underscore: 'libs/underscore/lodash.min',
underscorestring: 'libs/underscore/underscore.string.min'
},
shim: {
underscore: {
exports: '_'
}
underscorestring: {
deps: ['underscore'],
init: function (_) {
//Mixin plugin to namespace
_.mixin(_.str.exports());
return _;
}
}
}
});
When I try to do this and use underscorestring, I get this error:
Uncaught TypeError: Object function s(e){return new o(e)} has no
method 'startsWith'
Docs:
http://requirejs.org/docs/api.html#config-shim
http://requirejs.org/docs/api.html#config-callback

I don't know if it's the correct way, but I got it working by inverting things so that underscore depends on underscore.string. Also, this way you don't have to require underscore.string.
require.config({
shim: {
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'underscore': {
deps: ['underscore.string'],
exports: '_',
init: function(UnderscoreString) {
_.mixin(UnderscoreString);
}
}
},
paths: {
'backbone' : 'lib/backbone',
'jquery' : 'lib/jquery/jquery',
'text' : 'lib/require/text',
'underscore' : 'lib/underscore',
'underscore.string' : 'lib/underscore.string'
}
});
.
Update: 3/14/2014
Underscore.js v1.6.0 brought back AMD compatibility and init() has been removed from RequireJS, so some refactoring is in order. To continue getting Underscore preloaded with Underscore.string I made a mixer module to pull them together.
New Require.js config
requirejs.config({
paths: {
'backbone' : '../lib/backbone/backbone',
'backbone.base' : '../lib/backbone/backbone.base',
'backbone.extensions' : '../lib/backbone/backbone.extensions',
'jquery' : '../lib/jquery/jquery',
'text' : '../lib/require/text',
'underscore' : '../lib/underscore/underscore',
'underscore.mixed' : '../lib/underscore/underscore.mixed',
'underscore.string' : '../lib/underscore/underscore.string'
},
shim: {
'backbone.base': {
deps: ['underscore.mixed', 'jquery'],
exports: 'Backbone'
},
}
});
underscore.mixed
define([
'underscore',
'underscore.string'
], function(_, _s) {
_.mixin(_s.exports());
return _;
});
The final step is to replace all instances of 'underscore' with 'underscore.mixed' in module definitions. I attempted moving Underscore into a file named underscore.base.js and making the regular underscore the mixer (like the Backbone setup) to avoid this step. Underscore, being a named module, disagreed with the plan.

Do you require underscorestring somewhere? Because if it isn't required, it won't be loaded.
I managed to get it working with almost exactly the same code you posted:
require.config({
paths: {
underscore: [
'//raw.github.com/documentcloud/underscore/master/underscore-min'
, 'lib/underscore'
]
, underscorestring: 'https://raw.github.com/epeli/underscore.string/master/dist/underscore.string.min'
}
, shim: {
underscore: { exports: '_' },
underscorestring: {
deps: ['underscore'],
init: function(_) {
_.mixin(_.str.exports());
return _; // guess, this is not needed.
}
}
}
, exclude: ['underscore']
});
require(['underscore', 'underscorestring'], function(_) {
console.log( _.chars("i'm a happy string.") );
});

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'
For Mix in you could just with define
/*global define */
define([
'underscore',
'underscore.string'
], function ( ) {
_.mixin(_.str.exports());