Usemin revved filenames and requirejs dependencies

Question

I am having a problem with requirejs and usemin:

I want to set up a multi-page application where I dynamically load modules that contain only page-specific functions (for example, about → about.js, home → home.js). I could go and pack everything into one file, but it just leads to a larger file size and an overhead of functionality that is not needed on every site! (for example, why should I download the carousel plugin on a page that does not have a carousel!)

I checked the example https://github.com/requirejs/example-multipage-shim

This is actually a great way to handle this until I bring usemin into the game. After renewing the file names, the src path of each script tag is updated, but what about the dependencies?

<script src="scripts/vendor/1cdhj2.require.js"></script> <script type="text/javascript"> require(['scripts/common'], function (common) { require(['app'], function(App) { App.initialize(); }); }); </script> 

In this case, require.js was replaced with the revved file 1cdhj2.require.js. Excellent!

But the required modules "common" and "app" no longer work, because 4jsh3b.common.js has become common and the application has become 23jda3.app.js!

What can I do about this? Thank you for your help! (Also using Yeoman, by the way)

Answer 1

This is a complex issue, and I'm sure someone else has fixed a more elegant way, but for me it works.

I can post this as a grunt plugin if it is a little more reliable.

Taken from my Grunt file:

 "regex-replace": { rjsmodules: { // we'll build on this configuration later, inside the 'userevd-rjsmodules' task src: ['build/**/*.js'], actions: [] } }, grunt.registerTask('userevd-rjsmodules', 'Make sure RequireJS modules are loaded by their revved module name', function() { // scheduled search n replace actions var actions = grunt.config("regex-replace").rjsmodules.actions; // action object var o = { search: '', replace: '', //<%= grunt.filerev.summary["build/js/app/detailsController.js"] %> flags: 'g' }; // read the requirejs config and look for optimized modules var modules = grunt.config("requirejs.compile.options.modules"); var baseDir = grunt.config("requirejs.compile.options.dir"); var i, mod; for (i in modules) { mod = modules[i].name; revvedMod = grunt.filerev.summary[baseDir + "/" + mod + ".js"]; revvedMod = revvedMod.replace('.js', '').replace(baseDir+'/',''); o.name = mod; o.search = "'"+mod+"'"; // use the moduleid, and the grunt.filerev.summary object to find the revved file on disk o.replace = "'"+revvedMod+"'"; // update the require(["xxx/yyy"]) declarations by scheduling a search/replace action actions.push(o); } grunt.config.set('regex-replace.rjsmodules.actions', actions); grunt.log.writeln('%j', grunt.config("regex-replace.rjsmodules")); grunt.task.run("regex-replace:rjsmodules"); }), 

Answer 2

You can also use the requirejs configuration configuration to specify a mapping between your source module and your revved. Filerev displays a final object containing a map of all the modules that were version and their original names. Use the write function of the grunt file to write the file in AMD mode with the contents being the resulting object:

 // Default task(s). grunt.registerTask('default', ['uglify', 'filerev', 'writeSummary']); grunt.registerTask('writeSummary', 'Writes the summary output of filerev task to a file', function() { grunt.file.write('filerevSummary.js', 'define([], function(){ return ' + JSON.stringify(grunt.filerev.summary) + '; })'); }) 

and use this file in your configuration file to use new updated modules instead of the old ones:

 require(['../filerevSummary'], function(fileRev) { var filerevMap = {}; for (var key in fileRev) { var moduleID = key.split('/').pop().replace('.js', ''); var revvedModule = '../' + fileRev[key].replace('.js', ''); filerevMap[moduleID] = revvedModule; } require.config({ map: { '*': filerevMap } }); 

The filerevMap object that I created above is specific to my folder structure. You can customize it as you wish. It simply looks at the filerev summary and ensures that the keys are modified according to your module names and values ​​according to your folder structure.