Question

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

我使用VueJS的默认Webpack项目和monofile组件。我希望它全部捆绑在一起。

为了精确，我想在大多数表格中使用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（请注意，您需要指向正确的位置，其中配置文件存储在alias 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

1 个答案: