运行代码提示Modernizer is not defined，如何在网页中正确安装Modernizer？

报错原因 #

你出现这个报错是因为网页还没有引入Modernizr库，浏览器无法识别Modernizr全局变量，另外注意你代码里的拼写多了一个e，正确拼写是Modernizr，拼写错误也会触发同类报错。

分步安装步骤 #

• 第一步：准备Modernizr库文件
  你可以根据自己的需求自定义构建仅包含所需检测功能的Modernizr js文件，比如你要检测地理位置支持，就只保留geolocation相关的检测逻辑，构建完成后将压缩后的js文件存到你项目的静态资源目录，比如/static/js路径下。
• 第二步：正确在网页中引入库
  必须把Modernizr的引入代码放在你调用它的业务代码之前，示例引入结构如下：

  <!DOCTYPE html>
  <html lang="zh-CN">
  <head>
    <meta charset="UTF-8">
    <title>测试页面</title>
    <!-- 第一步：先引入Modernizr文件，路径替换成你自己的实际路径 -->
    <script src="/static/js/modernizr-custom.min.js"></script>
  </head>
  <body>
    <!-- 你的页面内容 -->
    <script>
      // 第二步：再写你自己的业务代码
      if(Modernizr.geolocation){
          alert("geolocation is supported");
      }
    </script>
  </body>
  </html>
  

• 第三步：验证安装结果
  打开网页的开发者工具控制台，输入Modernizr回车，如果输出的是包含多个检测属性的对象，没有报未定义错误，就说明安装成功。

内容的提问来源于stack exchange，提问作者Dhafra Sanchez's