Modernizr.flexbox 在 React 应用中 returns 'undefined'

Question

我第一次尝试使用 Modernizr。按照示例并阅读文档，但我似乎遗漏了一些东西，因为我所有的测试都是 returning 'undefined'.

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

所有代码和配置都在同一目录中

modernizr-config.json

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

React 组件代码

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' 语句 return 'no' 和所有 console.log 语句 'undefined'

Answer 1

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

要让它工作，您需要对 modernizr 构建输出应用一些更改，以使其作为 ES6 模块工作。您可以在此处找到一个工作示例：https://github.com/fcaldera/modernizr-try. Check the commits 以了解您需要应用哪些更改。

虽然这可行，但它并不理想，因为如果您重新创建构建以添加更多测试或其他内容，您将不得不执行相同的操作，但这是一个开始并且并不难做到。

Modernizr.flexbox 在 React 应用中 returns 'undefined'

Modernizr.flexbox in React app returns 'undefined'

modernizr

reactjs