[SP2013] Loading scripts using RequireJS
In my previous blogpost I wrote about loading JavaScript files in a SharePoint app. I noted that the order of loading is important and that you can use jQuery to dynamically load the scripts. I also stated that my solution probably was not the prettiest one out there, which was a true fact.
Well, here I am again, with a better solution! A colleague of mine pointed out that there is a Javascript library called “RequireJS”. This library is built to support loading scripts, it also enables you to execute code after the required libraries were loaded. Sounds great, no? Well let’s get to it!
- First step would be to download RequireJS from the website; http://www.requirejs.org/.
- Include the file in your project. In this example I will use a provider hosted app with an MVC web application, but you can use exactly the same steps in a SharePoint hosted app as well.
- There are multiple ways in which you can load and configure requirejs. A page with four different patterns can be found here. I chose to use a seperate config file, which means I included this in my <head> tag:
<script data-main="Scripts/init" src="Scripts/require.js"></script>
What will now happen is that the require.js file is loaded and after it has been loaded; scripts/init.js is loaded, which contains my configuration. Note that you should not include the .js extension from this point on.
- Amongst some other initializations, my init.js file looks like this:
require.config({ baseUrl: 'scripts', paths: { jquery: 'jquery-1.9.1' }, deps: ['jsomtests', 'resttests'] });What we see here is the definition of the baseUrl, which is where RequireJS searches for the scripts. The paths section allows for a alias to be used. This is great for stuff like jquery where the version number is normally included in the filename. Now you can just specify ‘jquery’ in all of your other scripts and not worry about search-replace issues when you need to update the version. Lastly; the deps variable contains the dependencies we want to load on every page (since your init script is normally fired on every page).
- Now when you want to include other scripts, this is very easy. For example, loading init.js, SP.UI.Controls.js from SharePoint:
// The SharePoint js files URL are in the form: // web_url/_layouts/15/resource.js var hostweburl = getHostWebUrl(); var scriptbase = hostweburl + "/_layouts/15/"; require([scriptbase + 'init.js', scriptbase + "SP.UI.Controls.js"]);
The getHostWebUrl is the default one I also used in my previous post.
- Okay, with that loaded it is now time to execute some code. But of course, based on the SharePoint API’s we’re calling; we would need to include additional libraries like SP.Search.js. That’s where the real power of RequireJS comes in.
require([scriptbase + 'SP.runtime.js', scriptbase + 'SP.core.js', scriptbase + 'SP.js', scriptbase + 'SP.init.js', scriptbase + 'SP.Taxonomy.js', scriptbase + 'SP.Search.js'], function () { JSOMTests.init(); });What now happens is that RequireJS will first load all the additional Javascript libraries. They are loaded in the correct order and it’s not untill after that is done that our JSOMTests.init() method gets called. If you should require the DOM to be loaded as well, there is an additional module which can take of that for you (or use jQuery).
That’s all you need. I have fiddled around with this and find it a pretty clean way of loading scripts in the place you need them. it also makes sure that stuff you do not need is not loaded. Also be sure to check out the RequireJS documentation to see all kinds of optimizations you can also acheive using this library.
January 2, 2016 at 7:15 am |
[…] http://blog.repsaj.nl/index.php/2014/07/sp2013-loading-scripts-using-requirejs/ […]