如何在VueJS Webpack项目中使用Modernizr

时间:2018-03-11 14:22:11

标签: webpack vuejs2 modernizr vuetify.js

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

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

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

1 个答案:

答案 0 :(得分:3)

我没有使用过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) {
   ...
}