Question

我第一次尝试使用Modernizr。按照一个例子并阅读文档，但我似乎错过了一些东西，因为我的所有测试都返回'undefined'。

我正在使用create-react-app创建的React应用程序中编写代码我使用this tutorial作为主要步骤。

所有代码＆amp; config位于同一目录中

Modernizr的-config.json

{
  "minify": false,
  "options": [
  "setClasses"
  ],
    "feature-detects": [
    "test/css/flexbox",
    "test/css/flexboxlegacy",
    "test/css/flexboxtweener",
    "test/css/flexwrap"
  ]
}

反应组件代码

import React, { Component } from 'react';
import './App.css';
import Modernizr from './modernizr'

class App extends Component {
  render() {
    let qFlexbox = Modernizr.flexbox ? 'yes' : 'no'
    console.log(Modernizr.flexbox)
    let qFlexboxLegacy = Modernizr.flexboxlegacy ? 'yes' : 'no'
    console.log(Modernizr.flexboxlegacy)
    let qFlexboxTweener = Modernizr.flexboxtweener ? 'yes' : 'no'
    console.log(Modernizr.flexboxtweener)
    let qFlexWrap = Modernizr.flexwrap ? 'yes' : 'no'
    console.log(Modernizr.flexwrap)

    return (
      <div className="App">

        <ul>
          <li>flexbox: {qFlexbox}</li>
          <li>flexboxlegacy: {qFlexboxLegacy}</li>
          <li>flexboxtweener: {qFlexboxTweener}</li>
          <li>flexwrap: {qFlexWrap}</li>
        </ul>
      </div>
    );
  }
}

export default App;

所有'if'语句都返回'no'，所有console.log语句都是'undefined'

Answer 1

您不应该像那样导入这样的modernizr构建，因为它是IIFE。这意味着每次导入文件时都会原谅所有测试。在SPA的上下文中，由于多个测试执行，您最终可能会在HTML标记中出现很多类。除此之外，该函数不返回任何值，而是将结果附加到窗口对象。这就是您的测试返回undefined。

的原因

要使其正常工作，您需要对modernizr构建输出应用一些更改，以使其作为ES6模块运行。您可以在此处找到一个有效的示例：https://github.com/fcaldera/modernizr-try。查看commits，了解您需要应用的更改。

虽然这有效，但它并不理想，因为如果重新创建构建以添加更多测试或其他东西，你必须这样做，但这是一个开始，并不难做到。

React app中的Modernizr.flexbox返回'undefined'

1 个答案: