A template file structure for using RequireJS in a Wordpress plugin.
If you've used RequireJS before, you're probably in love with it. Ever wondered how to make it work within a Wordpress plugin? I had to do just this in a project, so I thought I'd share a template on how I did it. It's not very difficult, but did need a little research at the start.
## Loading behind the scenes
This plugin automatically loads your scripts behind the scenes, adding a script to the <head> in the format:
<script type='text/javascript' src='http://mypluginpath/js/lib/require.js?ver=1.0' data-main='http://mypluginpath/js/app'></script>
require.js is loaded synchronously, and the data-main attribute loads your application code in asynchronously.
In the command line, navigate to the /js directory and type node r.js -o app.build.js. This will minify all your JavaScript files into one small file called myplugin.min.js. The optimization settings are in app.build.js.
You'll want to show users on your site the minified JavaScript file for faster loading, but when you're developing you don't want to have to re-optimize your code every time you make a change. This template has a simple trick: add ?rq_debug as a query parameter to the url and it will load each script dynamically rather than using the minified file.