如何在VueJS Webpack单文件组件项目中打包使用Modernizr？求教程

没问题！我来一步步教你在VueJS默认的Webpack单文件组件项目里打包并使用Modernizr，刚好能满足你根据浏览器是否支持inputtypes.date来控制Vuetify日期选择器显示的需求。

步骤1：安装必要依赖 #

首先打开终端，在项目根目录下安装Modernizr和对应的Webpack loader：

npm install modernizr modernizr-loader --save-dev

• modernizr是核心库，负责特性检测
• modernizr-loader让Webpack能识别并处理我们的Modernizr配置文件

步骤2：创建Modernizr配置文件 #

在项目根目录新建一个名为.modernizrrc的JSON配置文件，只保留我们需要的特性检测（避免打包冗余代码）：

{
  "minify": true,
  "options": [
    "setClasses"
  ],
  "feature-detects": [
    "inputtypes/date"
  ]
}

• minify: 开启压缩，减小打包后的体积
• setClasses: 让Modernizr自动给<html>标签添加类名（支持的话加dateinput，不支持加no-dateinput）
• feature-detects: 指定我们需要检测的特性——这里只需要检测日期输入类型

步骤3：配置Webpack（适配Vue CLI 3+） #

如果你的项目用的是Vue CLI 3或更高版本，在根目录新建vue.config.js文件，添加以下配置让Webpack识别Modernizr：

const path = require('path');

module.exports = {
  chainWebpack: config => {
    // 添加Modernizr loader规则
    config.module
      .rule('modernizr')
      .test(/\.modernizrrc$/)
      .use('modernizr-loader')
      .loader('modernizr-loader')
      .end();
  },
  resolve: {
    // 给Modernizr配置文件设置别名，方便引入
    alias: {
      modernizr$: path.resolve(__dirname, '.modernizrrc')
    }
  }
};

如果是Vue CLI 2的项目，你需要修改build/webpack.base.conf.js里的module规则和resolve配置，逻辑是一样的。

步骤4：在Vue项目中引入并使用Modernizr #

全局引入（推荐） #

在src/main.js里引入Modernizr并挂载到window对象，这样所有组件都能直接使用：

import Modernizr from 'modernizr';
window.Modernizr = Modernizr;

在组件中控制Vuetify日期选择器 #

现在你可以在表单组件里，根据Modernizr的检测结果动态切换显示原生日期输入框还是Vuetify日期选择器：

<template>
  <div class="date-container">
    <!-- 浏览器不支持原生日期输入时，显示Vuetify日期选择器 -->
    <v-date-picker
      v-if="!supportsDateInput"
      v-model="selectedDate"
      no-title
      scrollable
      class="date-picker"
    ></v-date-picker>

    <!-- 浏览器支持原生日期输入时，显示原生输入框 -->
    <v-text-field
      v-else
      v-model="selectedDate"
      label="选择日期"
      type="date"
      :rules="[v => !!v || '日期不能为空']"
    ></v-text-field>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selectedDate: null
    };
  },
  computed: {
    supportsDateInput() {
      // 直接使用Modernizr的检测结果
      return Modernizr.inputtypes.date;
    }
  }
};
</script>

<style scoped>
.date-picker {
  max-width: 400px;
  margin: 0 auto;
}
</style>

额外小技巧：用CSS控制显示 #

如果你更倾向于用CSS来控制显示，可以利用Modernizr自动添加的html类名：

/* 支持原生日期输入时，隐藏Vuetify选择器 */
.dateinput .date-picker {
  display: none;
}

/* 不支持时，隐藏原生输入框 */
.no-dateinput [type="date"] {
  display: none;
}

这种方式不需要修改组件的JS逻辑，适合简单场景。

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