VueJS Webpack 프로젝트에서 Modernizr을 사용하는 방법

VueJS Webpack 프로젝트에서 Modernizr을 사용하는 방법

VueJs Webpack 프로젝트에서 Modernizr을 번들하여 사용할 수 있는 간단한 튜토리얼을 가지고 계신 분 계십니까?

모노파일 컴포넌트와 함께 VueJ의 기본 웹팩 프로젝트를 사용합니다.전부 묶어서 주세요.

정확성을 위해 대부분의 폼에서 inputtypes.date를 사용하고 달력 보기 기능이 지원되는 모바일브라우저에서는 달력 보기 표시를 피하고 싶습니다.

모더니즈를 사용한 적은 없지만 웹팩을 사용한 경험을 바탕으로 기존 모더니즈 로더, 즉 webpack-modernizr-loader를 사용해도 좋다고 생각합니다.

문서에 나와 있는 바와 같이.modernizrrc.js예를 들어 다음과 같습니다.

"use strict";

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

웹 팩 규칙 및 별칭 추가webpack.config.js(에일리어스 패스에 컨피규레이션파일이 격납되어 있는 올바른 장소를 포인트 할 필요가 있습니다).):

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")
    }
  }
}

그 후, EMS를 Import 할 수 있습니다.modernizr다음과 같이 사용합니다.

import modernizr from 'modernizr';

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

언급URL : https://stackoverflow.com/questions/49221027/how-to-use-modernizr-in-vuejs-webpack-project