我如何在 React 中导入 Modernizr

Question

我正在尝试检测浏览器是否支持 create-react-app 中的 window.addEventListener。我按照 modernizr 网站上的说明创建了一个 modernizr.min.js 文件，其中只有我想要的单一功能测试。我无法导入 modernizr，因为它不是模块。缩小后的代码很难阅读，所以我不确定在哪里修改它以使其成为一个模块。

那么我如何在 React 应用程序的 javascript 中实际使用 Modernizr？

Answer 1

在你的public/index.html下直接导入脚本就可以了

public/index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"/>
    <meta name="theme-color" content="#000000" />


    ...


    <!-- add your scripts here -->
    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.3/modernizr.min.js"></script>
    <!-- -->


    <title>React App</title>
  </head>
  <body>

然后在你的代码中直接调用它

即在 App.jsx

import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';

class App extends Component {
  render() {

    // add this to not trigger eslint no-undef
    /* global Modernizr */
    console.log(Modernizr);
    // do your checking with Modernizr
    if (Modernizr.awesomeNewFeature) {
      // do your stuff here
    } 

 ...

如果您正在使用 typescript，您需要在将使用 Modernizr 的打字稿文件的开头首先声明 module/object，即

declare const Modernizr:any;

或扩展Window接口，即

declare global {
  interface Window {
    Modernizr:any     
  }
}

然后在window界面下调用Modernizr，像这样

window.Modernizr.someFeature

我如何在 React 中导入 Modernizr

How do I import Modernizr in React

modernizr

reactjs