Require JS, Loading Libraries through CDN fails - javascript

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.

Related

RequireJS module dependencies and includes

In my RequestJS config file, I am loading select2 and I'd like to also load locales for it. I currently have this setup :
require.config({
enforceDefine: true,
baseUrl: '/js',
shim: {
'bootstrap#3.1.1': {
deps: [ 'jquery' ],
exports: '$' // export jQuery...
},
'jquery#2.1.1': {
exports: '$'
},
'select2': {
deps: [
'bootstrap',
'lib/select2_locales/select2_locale_fr',
/// NOTE : add locales here
'css!/css/select2/select2.css',
'css!/css/select2/select2-bootstrap.css',
],
exports: '$.fn.select2'
}
},
paths: {
'bootstrap#3.1.1': 'lib/bootstrap.min',
'jquery#2.1.1': 'lib/jquery.min'
 },
map: {
'*': {
'css': 'css#0.1.2',
'jquery': 'jquery#2.1.1',
'bootstrap': 'bootstrap#3.1.1'
}
}
});
The problem, here, is that lib/select2_locales/select2_locale_fr needs to be loaded after select2.min.js.
Is there some way I can change this configuration, or add an option, so I can load the locales along with select2, from the require config file?
If that is the case, then select2_locale_fr is not a dependency of select 2, select2 is a dependency of select2_locale_fr
define('locale_specific_select2',['select2'], function(select2){
select2.accomodateNewLocale= function(stuff){
doWhatYouNeedToWith(stuff);
}
locale = determineLocale()
function processLocaleData(localeData){
select2.accomodateNewLocale(localeData);
}
require(['pathTOLocalePlugin'+locale], processLocaleData);
}

Delete unused shim config in RequireJS?

OK, so my problem is that I'd like to be able to automatically delete parts of the shim config I've set up for RequireJS; rather than loading the entire minified Bootstrap file I split it up into the different plugins, so that I get the benefit of less filesize when my application uses less of the Bootstrap components. E.g:
require.config({
paths : {
jquery : 'vendor/jquery/jquery.min',
bootstrap : 'vendor/bootstrap-sass/js'
},
shim : {
'bootstrap/affix': { deps: ['jquery'], exports: '$.fn.affix' },
'bootstrap/alert': { deps: ['jquery'], exports: '$.fn.alert' },
'bootstrap/button': { deps: ['jquery'], exports: '$.fn.button' },
'bootstrap/carousel': { deps: ['jquery'], exports: '$.fn.carousel' },
'bootstrap/collapse': { deps: ['jquery'], exports: '$.fn.collapse' },
'bootstrap/dropdown': { deps: ['jquery'], exports: '$.fn.dropdown' },
'bootstrap/modal': { deps: ['jquery'], exports: '$.fn.modal' },
'bootstrap/popover': { deps: ['jquery'], exports: '$.fn.popover' },
'bootstrap/scrollspy': { deps: ['jquery'], exports: '$.fn.scrollspy' },
'bootstrap/tab': { deps: ['jquery'], exports: '$.fn.tab' },
'bootstrap/tooltip': { deps: ['jquery'], exports: '$.fn.tooltip' },
'bootstrap/transition': { deps: ['jquery'], exports: '$.support.transition' },
}
});
Whilst the r.js optimizer correctly identifies that I'm only using bootstrap/dropdown, it still includes the shim config for files that don't end up in the production code. So my question is can I get rid of the unused shim files automatically? I'm using grunt-contrib-requirejs for the actual optimization and have had no problems with that. A Grunt based solution would be preferable but I'm open to anything else. Thanks.
To summarize the great points made above, and hopefully close the question
Unused shim configs are not removed by r.js since it can't know if you need them at run-time
~175 bytes (gzipped) are not worth manually optimizing, especially as part of a payload 200 times that big, and won't cause noticeable improvement
AMDClean could be an automated way to de-AMDify your scripts completely and thus meet your size-saving desires

problems with backbone.js and require.js in iOS webviews

I'm having some strange issues with our application not executing javascript
I have a web view thats loaded in an iPad app.
the page renders using require and backbone but something prevents the external libraries to execute.
the issues are with both d3.js and a jquery countdown plugin.
using firebug I dont get any errors but the countdown isnt starting.
same with d3 drawing some things but click functionality isnt working
im not sure if its a require issue or an iOS6 issue.
if it was a require issue i assume we'd get errors. but we dont.
anyone have any clues to what might be the issue?
main controller looks like this
/*global require: false */
/*jslint nomen: true */
// Sets up common libraries for all pages
require.config({
paths: {
// Major libraries
'jquery': 'lib/jquery-1.8.2.min',
//'jquery.mobile': 'lib/jquery.mobile-1.2.0.min',
//'jquery.mobile-config': 'lib/jquery.mobile-config',
'underscore': 'lib/underscore-min',
'backbone': 'lib/backbone-min',
'fastclick': 'lib/fastclick.min',
'easing': 'lib/jquery.easing.1.3',
'countdown':'lib/jquery.countdown.min',
// Require.js plugins
'text': 'lib/text',
'socket.io': 'lib/socket.io.min'
},
shim: {
'jquery': {
exports: '$',
exports: 'jQuery'
},
'easing': ['jquery'],
//'jquery.mobile-config': ['jquery'],
//'jquery.mobile': ['jquery','jquery.mobile-config'],
'fastclick': {
exports: 'FastClick'
},
'countdown': {
deps: ['jquery'],
exports: 'countdown'
},
'underscore': {
exports: '_'
},
'backbone': {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
'socket.io': {
exports: 'io'
}
}
});
require(['jquery', 'underscore', 'views/main-view', 'view-controller','fastclick', 'easing', 'countdown'], function ($, _, MainView, ViewController, fc, easing, countdown) {
"use strict";
var mainView = new MainView();
$("body").html(mainView.render().el);
ViewController.initialize();
});

Require.js Shim for loading JQuery UI and other JQuery Packages

I am trying to load JQuery-Ui with a shim, but JQueryUi keeps timing out when I try to load it even when I know the path is correct.
require.config({
paths: {
jQuery: 'libs/jquery-wrapper',
jQueryUi: 'libs/jquery-ui-min',
jQuerySelectmenu: 'libs/jquery.ui.selectmenu',
Underscore: 'libs/underscore-wrapper',
Backbone: 'libs/backbone-wrapper',
},
shim: {'Backbone': {
//These script dependencies should be loaded before loading
//backbone.js
deps: ['Underscore', 'jQuery'],
//Once loaded, use the global 'Backbone' as the
//module value.
exports: 'Backbone'
},
'jQueryUi': {
deps: ['jQuery'],
},
'jQuerySelectmenu': {
deps: ['jQuery', 'jQueryUi']
}
}
});
require([
'jQuery',
'Underscore',
'Backbone',
'jQueryUi',
'jQuerySelectmenu'
],
function(App) {
require(['order!src/app']
, function (App) {
App.initialize();
});
});
I think what damee is offering stands for older version of requireJs. Just folllow this tutorial as I did: Load jQuery UI with requireJS
Try to use this project https://github.com/jrburke/jqueryui-amd to translate your jqueryui to modularized version. Then you can simply use it:
define(['jquery', 'jqueryui/tabs'], function($){
$('#tabs').tabs();
});
With requirejs config:
requirejs.config({
paths: {
'jqueryui': '/javascript-cdn/jqueryui/' //output form jqueryui-amd
},
shim: {
'jquery': {
deps: [],
init: function(){
return $;
}
},
'jqueryui': {
deps: ['jquery']
}
}
});
I hope this helps.

Sequential loading of scripts in require.js and use.js

I'm using in my project require.js and it's plugin use.js.
require.config({
// Initialize the application with the main application file
deps: ["main"],
paths: {
// JavaScript folders
libs: "../assets/js/libs",
plugins: "../assets/js/plugins",
// Libraries
jquery: "../assets/js/libs/jquery",
underscore: "../assets/js/libs/underscore",
backbone: "../assets/js/libs/backbone",
jqueryUI: "../assets/js/libs/jqueryUI",
jquerySlider: "../assets/js/libs/slider",
jqueryMouseWheel: "../assets/js/libs/jquery.mousewheel",
jquerySelectBox: "../assets/js/libs/selectBox",
jqueryMouse: "../assets/js/libs/mouse",
bookReader: "../assets/js/libs/newReader",
// Shim Plugin
use: "../assets/js/plugins/use"
},
use: {
backbone: {
deps: ["use!underscore", "jquery"],
attach: "Backbone"
},
underscore: {
attach: "_"
},
jqueryUI: {
deps: ["jquery"]
},
jquerySlider: {
deps: ["jquery", "jqueryMouse"]
},
jquerySelectBox: {
deps: ["jquery"]
},
jqueryMouse: {
deps: ["jquery", "jqueryUI"]
},
jqueryMouseWheel: {
deps: ["jquery", "jqueryUI"]
},
bookReader: {
deps: ["jquery", "jqueryUI", "jqueryMouse", "jquerySlider", "jqueryMouseWheel", "jquerySelectBox"],
attach: "Reader"
}
}
});
The problem is that scripts start load simultaneously, and because of that there are unmet dependencies, often there are these two errors
Uncaught TypeError: Object function (a, b) {return new e.fn.init (a, b, h)} has no method 'widget': 4444/assets/js/libs/mouse.js: 15
Uncaught TypeError: Cannot read property 'mouse' of undefined: 4444/assets/js/libs/slider.js: 20
Once the files are in the cache, the problem no longer occurs.
So, my question. How do I specify that the script must loaded consistently?
It is possible to build scripts that wrap them into one file. But this option is not very desirable
Thank you!
Have a look at this AMD loader plugin called STEP, it allows you to load scripts in sequential order.
https://github.com/requirejs/step

Categories

Resources