如何在VueJS Webpack项目中使用Modernizr [英] how to use Modernizr in VueJS Webpack project

问题描述

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

Does anyone have a simple tutorial to bundle and use Modernizr in a VueJs Webpack project?

我将VueJS的默认Webpack项目与monofile组件一起使用. 我希望所有东西都捆绑在一起.

I use the default Webpack project of VueJS with monofile components. I want it all bundled.

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

For precision i want to use inputtypes.date in a majority of forms and avoid display vuetify date picker when on mobile browser with date picker support.

推荐答案

我没有使用过modernizr，但是根据我使用webpack的经验，我认为您可以使用现有的modernizr加载程序，即

I have not used modernizr, but based on my experience using webpack, i think you can use existing modernizr loaders, i.e webpack-modernizr-loader

如其文档所述，您可以使用.modernizrrc.js配置文件，例如:

As its docs says your can use .modernizrrc.js config file, for example:

"use strict";

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

在webpack.config.js中添加webpack规则和别名(请注意，您需要指向正确的位置，配置文件存储在别名path.resolve ...中):

adding webpack rule and alias to your webpack.config.js (note you need point to right place, where config file stored in 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并像这样使用它:

then you can import your modernizr and use it like this:

import modernizr from 'modernizr';

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

这篇关于如何在VueJS Webpack项目中使用Modernizr的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！