需要Modernizr的JS配置

requireJS configuration for Modernizr

本文关键字：配置 JS Modernizr 需要      更新时间：2023-09-26

我正在尝试加载Modernizr功能，该功能使用requireJS动态检测
由于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源文件加载Modernizer时都没有指定任何目录：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项目，其中包括基本设置和运行演示。

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

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

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

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

我的建议是有一个垫片

Config

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
    }
});

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

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

通过这种方式，modernizr将在您的功能检测代码运行之前加载。

相关文章：