javascript Modernizr 的 requireJS 配置

requireJS configuration for Modernizr

提问by jantimon

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

我正在尝试使用requireJS动态加载Modernizr功能检测。 由于 Modernizr 内置了AMD支持，这应该不是问题。

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

我的 requireJS 配置包含到 Modernizr 源目录和功能检测目录的路径：

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

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

让我们假设我的观点之一需要svg测试。
我的视图定义可能如下所示

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

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

不幸的是svg.js无法找到，Modernizr.js因为所有功能都会检测到并且 Modernizr 源文件加载 Modernizr 而不指定任何目录：define(['Modernizr'], ...

Which results in a very ugly require.config

这导致非常丑陋的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?

有没有一种更简洁的方法来告诉 requireJS 在components/modernizr/src/找不到文件时进行搜索？

Update

更新

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

我创建了一个示例 github 项目，其中包括基本设置和运行演示。

回答by Stu Cox

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 RequireJScould be one option.

Modernizr 的 AMD 结构（目前）只是为了它自己的内部构建过程。我们已经讨论过公开它，以便您可以像您尝试的那样使用它，但尚未就一种方便的方法达成一致。RequireJS 的 Modernizr 插件可能是一种选择。

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

你在用鲍尔吗？如果是这样，值得注意的是 Modernizr尚不适合与 Bower 一起使用。

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:

目前将 Modernizr 与您的构建过程联系起来的推荐方法是使用grunt-modernizr，它会自动在您的代码中找到对 Modernizr 检测到的引用（或者您可以明确定义它们），然后您可以像任何一样使用生成的 Modernizr 构建需要时的其他 AMD 依赖项：

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

回答by Mohamed Rafi

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
    }

});

回答by Matt Derrick

If I understand your question correctly, wouldn't you just define your feature like so:

如果我正确理解您的问题，您会不会像这样定义您的功能：

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

This way modernizr will be loaded before your feature detection code runs.

这样，modernizr 将在您的功能检测代码运行之前加载。