Using RequireJS With Sitecore
Sitecore + RequireJS
We use jQuery heavily and suspect most others do too. We’ll focus on how setup jQuery and RequireJS within Sitecore. There are some key-modifications to make it work well with Sitecore.
Below is file structure in our demo that’s relevant to RequireJS:
This is require.setup.js. This acts as our configuration file.
Now let’s look how this fits into some typical HTML.
Writing The Modules
We’ll write a simple device detection module and psuedo-code a slider module.
Here is our device detection module detect.js.
Make sense? Next, we’ll write a slider module slider.js that references the device detection module detect.js.
Lastly, we’ll create demo.js that loads the slider and binds some arbitrary clicks to invoke methods from slider.js
The only requirement is that demo.js loads after RequireJS and the setup file has loaded. You could get away with this:
But that means every page will load jquery, demo.js, slider.js and detect.js whether they use them or not. I'd rather not.
We have an article written about that technique, but here is the relevant code. Hopefully it reads well enough for you follow.
It's very satisfying to reference a single JS file in the code-behind, simply add the corresponding Sublayout to a few templates and watch extremely rich client-side functionality pop-up all over the site.
I know this was a lengthy post - please leave any questions in the comments. I’d be happy to answer them. Thanks!