为Modernizr配置requireJS

Question

我正在尝试使用requireJS动态加载Modernizr功能检测。由于Modernizr已经内置了AMD支持，这应该不是问题。
我的requireJS配置包含指向Modernizr源目录和功能检测目录的路径：

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

假设我的一个视图需要进行 svg 测试。
我的视图定义可能看起来像这样

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

很遗憾，svg.js无法找到Modernizr.js，因为所有的特性检测和Modernizr源文件都没有指定任何目录而加载了Modernizr：define(['Modernizr']，..。

这会导致非常丑陋的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"
  }
});

有没有更简便的方法告诉requireJS在未找到文件时搜索components/modernizr/src/目录？

更新

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

- jantimon

---

想知道为什么要在Modernizr中使用AMD吗？您需要同步加载文件，以便在页面渲染之前运行测试。如果我没记错的话，AMD主要是为了帮助构建过程-https://github.com/Modernizr/Modernizr/issues/713 - Simon Smith

@SimonSmith 我正在使用 requireJS 的 r.js 脚本将我的应用程序构建为一个文件。如果我可以使用 requireJS 定义 modernizr 依赖关系，那将是非常棒的。 - jantimon

我假设你正在使用像Bower这样的工具来管理资源，因此你的“components”文件夹与项目文件夹不同（换句话说，你不能使用RequireJS中的“baseUrl”指向Modernizer）。不幸的是，似乎没有简单的方法来添加这些依赖项，你解决它的方式是唯一的选择。另一种选择是在Modernizer上运行“r.js”，然后将打包好的文件包含在你的应用程序中。但仍然不是很理想。 - danielepolencic

Answer 1

Modernizr的AMD结构目前仅用于其内部构建过程。我们讨论过将其公开，以便像您尝试的那样使用，但尚未就如何方便地实现此功能达成一致。RequireJS的Modernizr插件可能是一个选择。

您正在使用Bower吗？如果是这样，值得注意的是Modernizr还不能与Bower一起使用。

目前将Modernizr与您的构建过程绑定的推荐方法是使用grunt-modernizr，它将自动查找代码中对Modernizr检测的引用（或者您可以明确定义它们），然后您只需像处理任何其他AMD依赖项一样使用生成的Modernizr构建，每当您需要它时:

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

- Stu Cox

---

非常感谢！如果现在这是唯一的方法，我将转换到Grunt。 - jantimon

如果我已经有了一个自定义的 Modernizr 构建版本（使用了 Zurb Foundation），那么它如何支持 AMD？我没有看到模块的 define()。我发现在第一行附加了一个全局变量到 window 上。你能详细说明一下吗？ - elanh

一个构建好的 Modernizr 脚本不兼容 AMD，因此您应该使用一个 shim 配置。 - Stu Cox

Answer 2

我的建议是使用垫片

配置

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

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

你可以在你的脚本中使用define

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

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

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

});

- Mohamed Rafi

Answer 3

如果我正确理解您的问题，那么您只需像这样定义您的特征：

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

这样，现代化的检测工具将在您的特性检测代码运行之前被加载。

- Matt Derrick

---

我想加载一个功能检测及其所有依赖项。 - jantimon