requireJS configuration for Modernizr

Question

I am trying to load the Modernizr feature detects dynamically with requireJS.
As Modernizr has built in AMD support this shouldn't be a problem.

My requireJS configuration contains the paths to the Modernizr source directory and to the feature detects directory:

requirejs.config({
  paths: {
    "modernizr" : "components/modernizr/src",
    "feature-detects": "components/modernizr/feature-detects"
  }
});

Lets assume one of my views would require the svg test.
My view definition might look like this

define(["feature-detects/svg"], function() { .. });

Unfortunately the svg.js can't find Modernizr.js because all feature detects and Modernizr source files load Modernizr without specifying any directory: define(['Modernizr'], ...

Which results in a very ugly require.config

requirejs.config({
  paths: {
    "Modernizr": "components/modernizr/src/Modernizr",
    "addTest": "components/modernizr/src/addTest",
    "ModernizrProto": "components/modernizr/src/ModernizrProto",
    "setClasses": "components/modernizr/src/setClasses",
    "hasOwnProp": "components/modernizr/src/hasOwnProp",
    "tests": "components/modernizr/src/tests",
    "is": "components/modernizr/src/is",
    "docElement": "components/modernizr/src/docElement",
    "feature-detects": "components/modernizr/feature-detects"
  }
});

Is there a cleaner way to tell requireJS to search in components/modernizr/src/ whenever it couldn't find the file?

Update

I created an example github project which includes the basic setup and a running demonstration.

Answer 1

Modernizr's AMD structure is (currently) just for its own internal build process. We've discussed exposing this so that it can be used as you've tried, but haven't agreed on a convenient way to do this yet. A Modernizr plugin for RequireJS could be one option.

Are you using Bower? If so, it's worth noting Modernizr isn't suitable for use with Bower yet.

The recommended way to tie Modernizr into your build process at the moment is using grunt-modernizr, which will automatically find references to Modernizr detects in your code (or you can explicitly define them), then you can just use the resulting Modernizr build like any other AMD dependency whenever you need it:

define(['path/to/built/modernizr.js'], function (Modernizr) {
    if (Modernizr.svg) {
        ...
    }
});

Answer 2

My suggestion would be to have a shim

Config

paths: {
    'Modernizr': 'PATH TO MODERNIZR'
},
shim: {
    'Modernizr': {
         exports: 'Modernizr'
    }
}

=================

You can use define in your script

define(['Modernizr'],function(Modernizr) {
    'use strict';

    console.log(Modernizr)
    // This should log the Modernizr function

    //For Example
    if(Modernizr.boxshadow){
        // Do something here
    }

});