Question

您好我的项目正在使用reactjs和webpack，在加载网站时，如果在不支持reactjs或webpack的旧浏览器上运行，我无法显示我的浏览器不支持消息（我检查支持with modernizr库）。有没有办法让我显示一条消息并使用modernizr加载之前以某种方式？也许某种程度上使用一个脚本，可以在首先加载的html文件中使用modernizr？欢迎任何答案！（这需要适用于所有浏览器）。谢谢你的帮助！

Answer 1

如果你确切地知道你正在使用哪些功能以及旧浏览器不支持你可以做一些事情，比如选择加载＆＃34; polyfills＆＃34;文件。

要实现这样的目标，您首先需要为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>

无法显示没有浏览器支持消息

1 个答案: