Delete unused shim config in RequireJS? - javascript

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

Related

Handlebars is undefined using Require.js

I'm using Handlebars with Require.js, but for some reasons, Handlebars is undifined.
My config:
require.config({
paths: {
underscore: "lib/underscore-min", //1.8.3
backbone: "lib/backbone-min", //1.2.3
jquery: "lib/jquery-2.1.4.min", //2.1.4
marionette: "lib/backbone.marionette.min", //2.4.3
handlebars: "lib/handlebars.runtime.amd.min", //4.0.5
shim: {
"underscore": {
exports: "_"
},
"backbone": {
deps: ["underscore", "jquery"],
exports: "Backbone"
},
"jquery": {
exports: "jquery"
},
"marionette": {
deps: ["backbone", "jquery"],
exports: "Marionette"
},
"handlebars":{
exports: "Handlebars"
}
}
});
...and than in the same file:
require(["handlebars"], function(Handlebars){
"use strict";
console.log(Handlebars); //undefined
});
In an other file:
define(["handlebars"], function(Handlebars){
"use strict";
console.log(Handlebars); //still undefined
});
I'm also using precompiled templates, which are working perfectly fine, so I have no idea, what could be the problem.
Thanks in advance!
---- SOLUTION ----
As Rajab pointed out, the problem was that I used "handlebars" instead of "handlebars.runtime" so thanks for his help!
You need to use:
require(["handlebars.runtime"], function(Handlebars){`
instead of
require(["handlebars"], function(Handlebars){`
and also shim is used only for modules that don't support AMD. Shim completely useless in your example. All these libraries support AMD. For example look at 16 line in backbone.js:
define(['underscore', 'jquery', 'exports'], function(_, $, exports) {
or line 1002 in handlebars.runtime.amd.js
define('handlebars.runtime', ['exports', 'module', './handlebars/base' ... etc
All dependencies already inside it. So you need only paths in config:
require.config({
paths: {
underscore: "lib/underscore-min",
backbone: "lib/backbone-min",
jquery: "lib/jquery-2.1.4.min",
marionette: "lib/backbone.marionette.min",
handlebars: "lib/handlebars.runtime.amd.min",
}
}
require(['handlebars.runtime'], function(HandlebarsOrWhateverNameYouWantItStillWillbeHandlebars){
"use strict";
console.log(HandlebarsOrWhateverNameYouWantItStillWillbeHandlebars);
});
that's all.

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.

Backbone, RequireJS & Backbone-MVC, MVC = null

I'm using a combination of Backbone, RequireJS & Backbone-MVC (http://chance-an.github.io/backbone-mvc/#root/index).
But when I'm trying to use Backbone-MVC it returns a null.
Here's a list with all my javascript files
Main: http://pastebin.com/Pg0s73cH
App: http://pastebin.com/x4XFxPEG
Router: http://pastebin.com/0ADCn4SV
When I console log the MVC variable in Router it returns a null.
Can somebody find the problem?
Thanks!
you try with this code.
require.config({
paths: {
jquery: 'libs/jquery/jquery-min',
bootstrap: 'libs/bootstrap/bootstrap-min',
underscore: 'libs/underscore/underscore-min',
backbone: 'libs/backbone/backbone-min',
backbonemvc: 'libs/backbone/backbone-mvc',
templates: '../templates'
},
shim:{
'backbone': {
deps: ["underscore", "jquery"],
exports: "Backbone"
},
'backbonemvc': {
deps: ["backbone"],
exports: "MVC"
}
}
});
The shim config can be wrong.

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();
});

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