Question

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

那么我该如何在react app的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的typescript文件的开头声明模块/对象，即

declare const Modernizr:any;

或扩展Window界面，即

declare global {
  interface Window {
    Modernizr:any     
  }
}

并像这样在window接口下调用Modernizr

window.Modernizr.someFeature

如何在React中导入Modernizr

1 个答案: