如何在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屋!