配置

Question

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

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

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

让我们假设我的一个观点需要 svg 测试我的视图定义可能看起来像this

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/无法找到文件时进行搜索？

更新

我创建了一个example github project，其中包含基本设置和正在运行的demonstration。

Answer 1

Modernizr的AMD结构（目前）仅用于其内部构建过程。我们已经讨论了暴露这个问题，以便它可以像你尝试过的那样使用，但尚未就方便的方式达成一致。 A Modernizr plugin for RequireJS可能是一种选择。

你在使用Bower吗？如果是这样，值得注意的是Modernizr isn't suitable for use with Bower yet。

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

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

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
    }

});

Answer 3

如果我理解你的问题，你不会像以下那样定义你的功能：

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

这样就可以在功能检测代码运行之前加载modernizr。

Modernizr的requireJS配置

3 个答案:

配置