Created
November 8, 2012 18:19
-
-
Save radiosilence/4040553 to your computer and use it in GitHub Desktop.
RequireJS with Zurb Foundation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
requirejs.config({ | |
shim: { | |
'foundation/jquery.foundation.topbar': { | |
deps: ['jquery'], | |
}, | |
'foundation/jquery.cookie': { | |
deps: ['jquery'] | |
}, | |
'foundation/jquery.event.move': { | |
deps: ['jquery'] | |
}, | |
'foundation/jquery.event.swipe': { | |
deps: ['jquery'] | |
}, | |
'foundation/jquery.foundation.accordion': { | |
deps: ['jquery'] | |
}, | |
'foundation/jquery.foundation.alerts': { | |
deps: ['jquery'] | |
}, | |
'foundation/jquery.foundation.buttons': { | |
deps: ['jquery'] | |
}, | |
'foundation/jquery.foundation.clearing': { | |
deps: ['jquery'] | |
}, | |
'foundation/jquery.foundation.forms': { | |
deps: ['jquery'] | |
}, | |
'foundation/jquery.foundation.joyride': { | |
deps: ['jquery'] | |
}, | |
'foundation/jquery.foundation.magellan': { | |
deps: ['jquery'] | |
}, | |
'foundation/jquery.foundation.mediaQueryToggle': { | |
deps: ['jquery'] | |
}, | |
'foundation/jquery.foundation.navigation': { | |
deps: ['jquery'] | |
}, | |
'foundation/jquery.foundation.orbit': { | |
deps: ['jquery'] | |
}, | |
'foundation/jquery.foundation.reveal': { | |
deps: ['jquery'] | |
}, | |
'foundation/jquery.foundation.tabs': { | |
deps: ['jquery'] | |
}, | |
'foundation/jquery.foundation.tooltips': { | |
deps: ['jquery'] | |
}, | |
'foundation/jquery.foundation.topbar': { | |
deps: ['jquery'] | |
}, | |
'foundation/jquery.offcanvas': { | |
deps: ['jquery'] | |
}, | |
'foundation/jquery.placeholder': { | |
deps: ['jquery'] | |
}, | |
'foundation/app': { | |
deps: [ | |
'foundation/jquery.cookie', | |
'foundation/jquery.event.move', | |
'foundation/jquery.event.swipe', | |
'foundation/jquery.foundation.accordion', | |
'foundation/jquery.foundation.alerts', | |
'foundation/jquery.foundation.buttons', | |
'foundation/jquery.foundation.clearing', | |
'foundation/jquery.foundation.forms', | |
'foundation/jquery.foundation.joyride', | |
'foundation/jquery.foundation.magellan', | |
'foundation/jquery.foundation.mediaQueryToggle', | |
'foundation/jquery.foundation.navigation', | |
'foundation/jquery.foundation.orbit', | |
'foundation/jquery.foundation.reveal', | |
'foundation/jquery.foundation.tabs', | |
'foundation/jquery.foundation.tooltips', | |
'foundation/jquery.foundation.topbar', | |
'foundation/jquery.offcanvas', | |
'foundation/jquery.placeholder', | |
'foundation/modernizr.foundation', | |
] | |
} | |
} | |
}); | |
require([ 'jquery' | |
, 'foundation/jquery.cookie' | |
, 'foundation/jquery.event.move' | |
, 'foundation/jquery.event.swipe' | |
, 'foundation/jquery.foundation.accordion' | |
, 'foundation/jquery.foundation.alerts' | |
, 'foundation/jquery.foundation.buttons' | |
, 'foundation/jquery.foundation.clearing' | |
, 'foundation/jquery.foundation.forms' | |
, 'foundation/jquery.foundation.joyride' | |
, 'foundation/jquery.foundation.magellan' | |
, 'foundation/jquery.foundation.mediaQueryToggle' | |
, 'foundation/jquery.foundation.navigation' | |
, 'foundation/jquery.foundation.orbit' | |
, 'foundation/jquery.foundation.reveal' | |
, 'foundation/jquery.foundation.tabs' | |
, 'foundation/jquery.foundation.tooltips' | |
, 'foundation/jquery.foundation.topbar' | |
, 'foundation/jquery.offcanvas' | |
, 'foundation/jquery.placeholder' | |
, 'foundation/modernizr.foundation' | |
, 'foundation/app' | |
], function($) { | |
$(document).ready(function() { | |
console.log("PARP"); | |
}); | |
}) |
Stumbled across this while learning about foundation.
The shim
config can take an array when the dependencies do not need to export anything. So this:
"foundation/jquery.cookie": { deps: ["jquery"] },
can be this:
"foundation/jquery.cookie": ["jquery"]
Been playing with it and the foundation JavaScript that comes out of an Bower install and I've cut all that requirejs boilerplate down a bit. (Pardon the coffeescript)
require
paths:
jquery: 'vendor/jquery'
f: 'vendor/foundation'
shim:
"vendor/foundation/foundation": ["jquery"]
, ["jquery", "vendor/foundation/foundation"]
, ($) ->
requirejs [
"f/foundation.alerts"
"f/foundation.clearing"
"f/foundation.cookie"
"f/foundation.dropdown"
"f/foundation.forms"
"f/foundation.interchange"
"f/foundation.joyride"
"f/foundation.magellan"
"f/foundation.orbit"
"f/foundation.placeholder"
"f/foundation.reveal"
"f/foundation.section"
"f/foundation.tooltips"
"f/foundation.topbar"], ->
...
I also seem to require having foundation itself loaded first, so I did shim that. This is what I ended up with. Not doing anything with it, but it all loads in the proper order and optimizes correctly. I'm new foundation, but have to convert a Rails app to use RequireJS via Mimosa and Foundation is one of the first things I'm moving over.
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Thanks for the nice work!
Small comments: You've inserted
jquery.foundation.topbar
twice;jquery.foundation.utils
need to be added for the newest version; and Modernizr should not be loaded by require.js, it should be inserted in<head>
before require.js to avoid flash of unstyled content.Also, the contents of app.js may be inserted directly in the main.js file - like this: