如何在 VueJS Webpack 项目中使用 Modernizr

Question

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

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

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

Answer 1

我没有使用过 modernizr，但根据我使用 webpack 的经验，我认为你可以使用现有的 modernizr 加载器，即 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) {
   ...
}

如何在 VueJS Webpack 项目中使用 Modernizr

how to use Modernizr in VueJS Webpack project

modernizr

webpack

vuejs2

vuetify.js