Skip to content

Instantly share code, notes, and snippets.

@cybercussion
Last active August 29, 2015 14:12
Embed
What would you like to do?
Sample RequireJS setup with some light failover for CSS.
/*global requirejs, define, require, CI, $, jQuery */
/*jslint devel: true, browser: true */
/**
* Require Config
* This is all the core scripts needed to be available at runtime.
* Includes CDN and local file fail over.
* Shim will control the availability of dependent libraries/scripts.
* domReady included to insure it all kicks off right.
* @usage <script data-main="js/config" src="js/vendor/requirejs/require.min.js"></script>
*/
requirejs.config({
urlArgs: "ts=" + new Date().getTime(), // disable caching - remove in production
paths: {
// Rack up CDN and local fail over files - '.js' not needed.
domReady: [
"//cdnjs.cloudflare.com/ajax/libs/require-domReady/2.0.1/domReady.min",
"vendor/requirejs/plugins/domReady.min"
],
modernizr: [
"//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min",
"vendor/modernizr.min"
],
prefixfree: [
"//cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min",
"vendor/prefixfree.min"
],
jquery: [
"//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min",
"vendor/jquery/2.1.1/jquery.min"
],
bootstrap: [
"//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.1/js/bootstrap.min",
"vendor/twitter-bootstrap/3.3.1/bootstrap.min"
],
// GSAP
tweenmax: [
"//cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/TweenMax.min",
"vendor/gsap/1.15.0/TweenMax.min"
],
kineticplugin: [
"//cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/plugins/KineticPlugin.min",
"vendor/gsap/1.15.0/plugins/KineticPlugin.min"
],
throwpropsplugin: [ // licensed plugin
"vendor/gsap/1.15.0/plugins/ThrowPropsPlugin.min"
],
draggable: [
"//cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/utils/Draggable.min",
"vendor/gsap/1.15.0/utils/Draggable.min"
],
jquerygsap: [
"//cdnjs.cloudflare.com/ajax/libs/gsap/1.15.0/jquery.gsap.min",
"vendor/gsap/1.15.0/jquery.gsap.min"
],
// Local
trace: [
"vendor/jquery/plugins/trace"
],
site: [
"site/Site"
],
email: [
"site/email/Email"
]
// End
},
shim: {
// defined dependencies on scripts
'domReady' : ['site'],
'bootstrap' : ['jquery'],
'trace' : ['jquery'],
'tweenmax' : ['jquery'],
'kineticplugin' : ['tweenmax'],
'throwpropsplugin' : ['tweenmax'],
'draggable' : ['tweenmax'],
'jquerygsap' : ['tweenmax'],
'site' : ['bootstrap'],
'email' : ['site']
}
});
/*
* Tip:
* 'define' appears to be a module/JS you depend on
* 'require' just loads most likely async and you can't rely on domReady then.
* Other examples online show domReady, and $ being passed in as arguments. I was unsuccessful getting that to work
* but '$' appears to be accessible when 'define' used.
*/
define([
'domReady',
'modernizr',
'prefixfree',
'jquery',
'bootstrap',
'trace',
'tweenmax',
'kineticplugin',
'throwpropsplugin',
'draggable',
'jquerygsap',
'site',
'email'], function (domReady) {
"use strict";
// Ready, Set, Go...
domReady(function () {
// Verify CSS - not a huge fan of this.
var ss = document.styleSheets,
len = ss.length,
i = 0,
sheet,
rules,
isError;
while (i < len) {
sheet = ss[i];
rules = sheet.rules ? sheet.rules : sheet.cssRules;
isError = rules.length === 0;
if (sheet.href !== null) {
// Bootstrap
if (sheet.href.toString().indexOf('twitter-bootstrap') > 0 && isError) {
$('<link rel="stylesheet" type="text/css" href="css/bootstrap/3.3.1/css/bootstrap.min.css" />').appendTo('head');
}
// Font Awesome
if (sheet.href.toString().indexOf('font-awesome') > 0 && isError) {
$('<link rel="stylesheet" type="text/css" href="css/font-awesome/4.2.0/css/font-awesome.min.css" />').appendTo('head');
}
}
i += 1;
}
// Fire up App
CI.init();
});
});
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment