Requirejs - versioning

Question

Quick note - by versioning I mean for the purposes of cache busting. The common practice of adding query params to the end of the script request does not work on all browsers. The easiest and the most messiest way that I have found to date is to version my entire deploy folder name.

-- scripts.v1
-- scripts.v2

But this is incredibly messy and mucks up the deploy times too (I use S3 as my cdn). Does anyone know of an alternate method to this?

EDIT

It seems, I have not been very clear. Let me be a bit more explicit.

I use requirejs on my site. It is quite a JavaScript heavy application with frequent updates and iterations. With requirejs in place now, the only way I can reliably make sure that browsers are serving the latest version, is to version my whole deploy folder name (javascript) and upload the whole lot of files to S3 again. I then use the data-main method to set the base path of the project.

For many reason, this is quite cumbersome. Even if the code change is just a few lines, the whole process has to be repeated. Is there some other decent method to let requirejs know that files have versions? As in, if I call

require(["superImportantJSFile"], function(){})

it will know that the current version is superImportantJSFile.v4.js or something along those lines.

I hope I have been more clear now. Any suggestions as to how the community in general does this? I'm pretty sure this has to be a common scenario, but I haven't been able to find a good solution to this yet

Answer 1

I like to use a post-build step that puts static resources into a folder with a path that includes the version control version number. For example source control revision number 1234 would lead to the creation of a path: /1234/scripts/*. These directories are also created in the CDN with the correct version of the assets within.

In our require.js config in a template, we replace the baseURL with the appropriate revision, which is controlled via a config file, eg:

var require = {
    baseUrl: "%%resDir%%",
    ...
};

This makes it easy to change the asset versions between a few different releases, which can all stay on the CDN without causing any conflicts. It also solves the browser cache busting issue.

Answer 2

The HTML5 Boilerplate offers one of the most graceful solutions I have seen. They have configs available for Apache and nginx. From there you can just add a timestamp to the filename within your script tags, like so:

<script src="scripts/app.20130728.js"></script>

Which the web server would rewrite to scripts/app.js.

Answer 3

You can add aliases to your RequireJS configuration by using map (see http://requirejs.org/docs/api.html#config-map) for example:

require.config({ /* ... other config.... */
     map: { '*': {'superImportantJSFile': 'superImportantJSFile.v4'} }
})

So you only have one place to update :)

You mentioned the use of a CDN which is a good use case to not put those files in your minimized r.js bundle (in case that you are using that tool). But if those files are updated frequently, maybe it makes sense to pack your modules with r.js and update the whole code.