如何构建新版Modernizr？原在线构建工具已失效

步骤1：初始化项目（已有项目可跳过） #

在项目根目录执行：

npm init -y

步骤2：安装Modernizr依赖 #

安装开发依赖：

npm install modernizr --save-dev

步骤3：生成配置文件 #

执行命令生成Modernizr配置模板：

npx modernizr config

项目根目录会自动生成modernizr-config.json文件。

步骤4：修改配置文件 #

将modernizr-config.json内容替换为以下配置，完全匹配你原在线链接的检测项，同时新增H.265（HEVC）视频检测：

{
  "minify": false,
  "options": [
    "setClasses"
  ],
  "feature-detects": [
    "css/flexbox",
    "css/flexboxlegacy",
    "css/flexboxtweener",
    "css/flexwrap",
    "dom/fullscreen",
    "geolocation",
    "video",
    "video/hevc",
    "img/webp"
  ]
}

配置对应说明：

• "minify": false 对应原链接的dontmin（不压缩代码）
• "setClasses" 对应原链接的setclasses（自动给<html>标签添加检测结果类）
• feature-detects数组包含所有指定检测项，其中video/hevc就是你需要的H.265视频播放检测

步骤5：构建自定义Modernizr #

执行构建命令生成目标文件：

npx modernizr -c modernizr-config.json -d dist/

执行完成后，dist目录下会生成modernizr.js，包含所有指定的检测功能，效果和你原在线构建的文件完全一致，且新增了H.265检测能力。

内容的提问来源于stack exchange，提问作者Paolo Benvenuto