브라우저 지원 메시지가 표시되지 않습니다.

Question

안녕하세요. 내 프로젝트가 reactjs 및 webpack을 사용 중입니다. 웹 사이트를로드 할 때 reactjs 또는 webpack을 지원하지 않는 이전 브라우저에서 실행중인 경우 브라우저가 지원되지 않는 메시지를 표시 할 수 없습니다. Modernizr 라이브러리 지원). 어떻게 든로드되기 전에 메시지를 보여주고 모더니져를 사용하는 방법이 있습니까? 어쩌면 어떻게 든로드하는 HTML 파일에서 modernizr을 사용할 수있는 스크립트를 사용 하시겠습니까? 어떤 대답이라도 환영 할 것입니다! (모든 브라우저에서 작동해야 함). 도와 주셔서 감사합니다!

Answer 1

정확히 어떤 기능을 사용하고 있고 이전 브라우저가 지원하지 않는다면 선택적으로 "polyfills"파일을로드하는 것과 같은 작업을 수행 할 수 있습니다.

이와 같이하려면 먼저 polyfill을위한 별도의 번들 파일을 만들어야하며 브라우저가 필요한 기능을 지원하지 않으면로드해야합니다. 이 마지막 단계에서는 html 파일에 템플릿이 있어야합니다. 당신의 웹팩 항목에서

:

polyfills: [ 
    'babel-polyfill', 
    'whatwg-fetch' 
] 

당신의 플러그인에서 :

new HtmlWebpackPlugin({ 
    template: './index.ejs', 
    filename: '../index.html', 
    inject: false 
}) 

당신의 index.ejs 파일에서 :

<script> 
var newBrowser = (
    'fetch' in window && 
    'Promise' in window && 
    'assign' in Object && 
    'keys' in Object 
); 

var scripts = []; 
if (!newBrowser) { 
    scripts.push('<%=htmlWebpackPlugin.files.chunks.polyfills.entry%>'); 
} 

scripts.push('<%=htmlWebpackPlugin.files.chunks.vendors.entry%>'); 
scripts.push('<%=htmlWebpackPlugin.files.chunks.app.entry%>'); 

scripts.forEach(function(src) { 
    var scriptEl = document.createElement('script'); 
    scriptEl.src = src; 
    scriptEl.async = false; 
    document.head.appendChild(scriptEl); 
}); 
</script>