如何在 VueJS Webpack 项目中使用 Modernizr

有人有在 VueJs Webpack 项目中捆绑和使用 Modernizr 的简单教程吗？

我使用带有单文件组件的 VueJS 默认 Webpack 项目。 我想要全部捆绑起来。

为了精确起见，我想在大多数表单中使用 inputtypes.date ，并避免在具有日期选择器支持的移动浏览器上显示 vuetify 日期选择器。

我没有使用过modernizr，但是根据我使用webpack的经验，我认为你可以使用现有的modernizr加载器，即webpack-modernizr-loader https://github.com/itgalaxy/webpack-modernizr-loader

正如它的文档所说，你可以使用.modernizrrc.js配置文件，例如：

"use strict";

module.exports = {
  options: [
    "setClasses"
  ],
  "feature-detects": [
    "inputtypes"
  ]
};

将 webpack 规则和别名添加到您的webpack.config.js（请注意，您需要指向正确的位置，其中配置文件存储在别名 path.resolve...）：

const path = require('path');

module.exports = {
  module: {
    rules: [
      {
        loader: "webpack-modernizr-loader",
        test: /\.modernizrrc\.js$/
      }
    ]
  },
  resolve: {
    alias: {
      modernizr$: path.resolve(__dirname, "/path/to/.modernizrrc.js")
    }
  }
}

然后你可以导入你的modernizr并像这样使用它：

import modernizr from 'modernizr';

if(modernizr.inputtypes.date) {
   ...
}