Develop Reference

"$.widget is not defined" after requirejs build

I'm using requirejs to load jquery.selectBoxIt. It uses the jQueryUI Widget factory, which is why I only loaded the widget factory from the jQueryUI official site into my project.
When the project is loaded with config.js, selectBoxIt runs without problems. But when I build the project with r.js, I get the error $.widget is not defined.
Please help me please fix it.
PS. I already read some Google results on it, but nothing helps.
config.js
require.config({
paths: {
'jquery': 'assets/libs/jquery/2.2.0/jscript/jquery.min',
'jquery.migrate': 'assets/libs/jquery/plugins/migrate/1.2.1/jscript/migrate.min',
'jquery.ui': 'assets/libs/jquery.ui/1.12.0/jscript/jquery-ui',
'jquery.selectboxit': 'assets/libs/jquery/plugins/selectboxit/3.8.1/jscript/selectBoxIt',
},
shim: {
'jquery.migrate': {
deps: ['jquery'],
exports: 'jQuery',
},
'jquery.selectboxit': {
deps: ['jquery.migrate', 'jquery.ui'],
},
},
});
module.js
define([
'jquery.selectboxit',
], function (SelectBoxIt) {
...
});
Error appear in selectBoxIt code in line
$.widget("selectBox.selectBoxIt", {

What does requirejs.config() do?

I am having trouble understanding about requirejs.config() function.
requirejs.config({
paths: {
'text': '../lib/require/text',
'durandal':'../lib/durandal/js',
'plugins' : '../lib/durandal/js/plugins',
'transitions' : '../lib/durandal/js/transitions',
'knockout': '../lib/knockout/knockout-3.1.0',
'bootstrap': '../lib/bootstrap/js/bootstrap',
'jquery': '../lib/jquery/jquery-1.9.1'
},
shim: {
'bootstrap': {
deps: ['jquery'],
exports: 'jQuery'
}
}
});
What does the function do? Please do not direct me to the documentation because I have read it and still found it confusing. I need a simple explanation on what this function does.
Are these scripts loaded asynchronously?

It creates aliases for script paths ant tells how to interpret bootstrap (non-AMD script) when loaded. Nothing is loaded yet. You have to require:
// we load two dependencies here
// `knockout` and `bootstrap` are expanded to values in config
// .js added to values
// callback function called when all dependencies are loaded
require(['knockout', 'bootstap'], function(Knockout, $) {
// jQuery is passed to this function as a second parameter
// as defined in shim config exports
});

The path is like declarations/definitions. So for example,
jquery: '../bower_components/jquery/dist/jquery',
you can later load this lib as follows.
define([
'jquery'
], function (jquery) {
//initialize or do something with jquery
}
You don't have to specify the absolute path of the library.
In shim, you will define dependencies. So for example,
paths: {
template: '../templates',
text: '../bower_components/requirejs-text/text',
jquery: '../bower_components/jquery/dist/jquery',
backbone: '../bower_components/backbone/backbone',
underscore: '../bower_components/underscore/underscore',
Router: 'routes/router'
},
shim: {
'backbone': ['underscore', 'jquery'],
'App': ['backbone']
}
Here backbone is dependent on underscore and jquery. So those two libs will be loaded before backbone starts loading. Similarly App will be loaded after backbone is loaded.
You might find this repo useful if you are familiar with backbone and express.
https://github.com/sohel-rana/backbone-express-boilerplate

Problems getting Foundation 4 JS to work in WP

I'm merging Foundation 4 with Bones to create a WP Starter theme. I had everything working fine with the JS from Foundation 3, but now that I'm trying to implement the Foundation 4 JS I'm running into some issues.
I followed the steps found in the Foundation 4 JS Documentation, but still had no luck. Here is the code I placed directly before the closing body tag (I know the correct way is to enqueue the script, but for testing I was just pasting it directly above the closing body tag):
<script>
document.write('<script src=http://mcfaddengavender.net/jeremy/wp-content/themes/bones-master/library/js/vendor/'
+ ('__proto__' in {} ? 'zepto' : 'jquery')
+ '.js><\/script>');
</script>
<script src="http://mcfaddengavender.net/jeremy/wp-content/themes/bones-master/library/js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
I'm attempting to open a modal on this page, but as you can see, the modal never fires when you click the link. I notice some errors in the Javascript console, but I'm still new to JS so they are a bit over my head.
As I mentioned before, things were working fine with the Foundation 3 JS, which didn't require the call to initialize the function - it just seemed to work. Not sure if that makes a huge difference, but it's something I noticed that was different about the documentation for Foundation 4 JS compared to Foundation 3 JS.
Can anyone get me pointed in the right direction?

It looks like the browser can't find Zepto (at least chrome can't).
It's looking for it here:
http://mcfaddengavender.net/library/js/vendor/zepto.js but it returns a 404
Make sure you have your libraries set up in the appropriate directories!

well after i commented, i got it to work lol. maybe this will help you or someone else.
it seems like the docs are a little bit confusing, i was only able to get plugin functionality from loading foundation/foundation.js and foundation-whatever-plugin.js in this sequence - loading just foundation.js did not work for me.
i'm using requirejs to load so i don't have to worry about paths, but for your purposes just make sure you're not having any paths issue and this load order should work. for troubleshooting purposes i'm bypassing modernizr / zepto detectors and just loading jquery straight.
requirejs.config({
baseUrl: "/path/to/scripts",
paths:{
jquery: 'vendor/jquery/jquery.min',
},
shim: {
'foundation/foundation': { deps: ['jquery'] },
'foundation/foundation.alerts': { deps: ['jquery'] },
'foundation/foundation.clearing': { deps: ['jquery'] },
'foundation/foundation.cookie': { deps: ['jquery'] },
'foundation/foundation.dropdown': { deps: ['jquery'] },
'foundation/foundation.forms': { deps: ['jquery'] },
'foundation/foundation.joyride': { deps: ['jquery'] },
'foundation/foundation.magellan': { deps: ['jquery'] },
'foundation/foundation.orbit': { deps: ['jquery'] },
'foundation/foundation.placeholder': { deps: ['jquery'] },
'foundation/foundation.reveal': { deps: ['jquery'] },
'foundation/foundation.section': { deps: ['jquery'] },
'foundation/foundation.tooltips': { deps: ['jquery'] },
'foundation/foundation.topbar': { deps: ['jquery'] },
'vendor/jquery.maskedinput/jquery.maskedinput.min': { deps: ['jquery']},
'vendor/chosen/chosen/chosen.jquery': { deps: ['jquery']},
'vendor/tablesorter/js/jquery.tablesorter.min': { deps: ['jquery']},
'vendor/tablesorter/addons/pager/jquery.tablesorter.pager.min': {
deps: [
'jquery',
'vendor/tablesorter/js/jquery.tablesorter.min'
]
},
'vendor/redactor-js/redactor/redactor.min': { deps: ['jquery']},
'lib/jquery.passwordstrength': { deps: ['jquery']}
}
});
require(["jquery",
"foundation/foundation",
"foundation/foundation.alerts",
"foundation/foundation.clearing",
"foundation/foundation.cookie",
"foundation/foundation.dropdown",
"foundation/foundation.forms",
"foundation/foundation.joyride",
"foundation/foundation.magellan",
"foundation/foundation.orbit",
"foundation/foundation.placeholder",
"foundation/foundation.reveal",
"foundation/foundation.section",
"foundation/foundation.tooltips",
"foundation/foundation.topbar"
], function ($) {
$(document).foundation();
});

A method for loading the backbone stack with require

Here is how I would do it using plain HTML script tags per this SO Question on CDN suggestions. This would be a serial load (underscore->jquery->backbone) that holds up the rest of the page.
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.10/backbone-min.js"></script>
How would I load these libraries using require.js or a similar non-blocking method?
References ( links to the API )
underscore
jQuery
backbone
require

jquery is AMD Friendly so you can just require it in your require.js config
Backbone and underscore are no longer AMD Friendly so you have these options:
You can either include them as "externals", with shim assigning the correct dependencies (see here the docs and a tutorial )
Or you can use slightly altered versions of both libraries that are AMD enabled. You can find them in this repository.
Use an older version of backbone and underscore. (not recommended)
Note: If you opt for the shimming route, keep in mind that those libraries will not be load asynchronously.
Here's a working example using the ALTERED VERSIONS of the library:
require.config({
enforceDefine: true, //Only libraries AMD Friendly will be loaded
urlArgs: "bust=" + (new Date()).getTime(), //for development, forces browser to clear the cache
paths: { // relative paths (to the current file main.js)
"es5": 'libs/es5-shim/es5-shim',
"jquery": 'libs/jquery/jquery',
"jqueryThreeDots": 'libs/jquery/plugins/jquery.ThreeDots',//A jquery plugin
"underscore": 'libs/underscore/underscore.amd',
"underscore.string": 'libs/underscore/underscore.string',
"backbone": 'libs/backbone/backbone.amd',
"text": 'text',
"mediator": 'libs/backbone/plugins/backbone.mediator',
"bootstrap": 'libs/bootstrap/bootstrap.min',
"rangy": 'libs/rangy/rangy-core.amd',
},
shim: {
"bootstrap": {
deps: ["jquery"],
exports: "$.fn.popover"
}
}
});
An example with shim:
require.config({
enforceDefine: true,
urlArgs: "bust=" + (new Date()).getTime(),
paths: {
"jquery": 'http://code.jquery.com/jquery-1.9.1.min.js'
},
shim: {
backbone: {
deps: ["underscore", "jquery"], // Backbone dependencies
exports: "Backbone" // variable exported
},
underscore: {
exports: "_"
}
}
});

This is how we include jQuery, Underscore and Backbone with Require in our projects:
requirejs.config({
baseUrl: "js",
paths: {
backbone: "backbone-min",
jquery: "jquery.min",
underscore: "underscore-min"
},
shim: {
backbone: { deps: ["underscore", "jquery"], exports: "Backbone" },
jquery: { exports: "jQuery" },
underscore: { exports: "_" }
}
});
requirejs(["backbone"], function (Backbone) {
// Now we can reference not just Backbone but also jQuery and
// underscore since those two are dependencies for Backbone.
});

Why is requirejs trying to append a '.js' to .jst template files that are loaded with the !text plugin?

I use a .jst extension for template files, and load these with the requirejs text! plugin. E.g.,
define([
'jquery',
'backbone',
'underscore',
'text!templates/MyView.jst'
],
function($, Backbone, _, templateText) {
return Backbone.View.extend({
template: _.template(templateText),
initialize: function() {
},
render: function() {
}
});
});
This works swell when I test locally. However, when I try to do this after I've deployed my static files to AWS (the dynamic portions of the app run on Heroku), it fails to load the .jst files and appears to be trying to append a .js to their url's.
For reference, here's my requirejs config (from main.js)
requirejs.config({
paths: {
//directories
plugins: "lib/plugins",
//libs
jquery: "lib/jquery/1.7.1/jquery",
underscore: "lib/underscore/1.3.3/underscore",
backbone: "lib/backbone/0.9.2/backbone",
moment: "lib/moment", // date lib
//require plugins
text: "lib/require/plugins/text",
domReady: "lib/require/plugins/domReady"
},
shim: { //specify all non-AMD javascript files here.
backbone: {
deps: ['underscore', 'jquery'],
exports: 'Backbone'
},
underscore: {
exports: '_'
},
moment: {
exports: 'moment'
},
'plugins/jquery.colorbox': ['jquery'],
'util/jquery.dropTree':['jquery'],
'util/common':['jquery']
}
});

I just updated the text.js README with info that explains this issue. It is basically a way to use text resources across domains, but it requires a build. There is a way to override. Details here:
https://github.com/requirejs/text#xhr-restrictions