Modernizr的requireJS配置
Posted
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Modernizr的requireJS配置相关的知识,希望对你有一定的参考价值。
我正在尝试加载使用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。
Modernizr的AMD结构(目前)仅用于其内部构建过程。我们已经讨论了暴露这个问题,以便它可以像你尝试过的那样使用,但尚未就方便的方式达成一致意见。 A Modernizr plugin for RequireJS可能是一种选择。
你在使用Bower吗?如果是这样,值得注意的是Modernizr isn't suitable for use with Bower yet。
目前将Modernizr绑定到构建过程的推荐方法是使用grunt-modernizr,它将自动在代码中找到对Modernizr检测的引用(或者您可以明确定义它们),然后您可以像任何其他AMD一样使用生成的Modernizr构建在需要时依赖:
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。
以上是关于Modernizr的requireJS配置的主要内容,如果未能解决你的问题,请参考以下文章
GruntGulp区别 webpack requirejs区别
是否有任何 javascript 代码(polyfill)可以启用 Flexbox(2012,css3),例如modernizr?