12

我正在尝试使用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 项目，其中包括基本设置和运行演示。

4

3 回答 3

19

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

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

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

define(['path/to/built/modernizr.js'], function (Modernizr) {
    if (Modernizr.svg) {
        ...
    }
});
于 2013-08-14T11:42:17.360 回答
11

我的建议是有一个垫片

配置

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

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

您可以在脚本中使用定义

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

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

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

});
于 2014-07-21T15:19:34.810 回答
-1

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

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

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

于 2013-08-13T17:10:45.080 回答