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

Posted 2023-03-10

【中文标题】无法显示无浏览器支持消息

【英文标题】：cannot display no browser support message

【发布时间】：2017-07-16 22:16:55

【问题描述】：

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

【参考方案1】：

如果您确切知道您正在使用哪些功能并且旧浏览器不支持，您可以执行一些操作，例如选择性地加载“polyfills”文件。

要实现这样的目标，您首先需要为 polyfills 创建一个单独的包文件，如果浏览器不支持所需的功能，则必须加载它们。最后一步要求您在 html 文件中添加一些模板。

在你的 webpack 条目中：

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>

【讨论】：

我想要的是不支持浏览器，只是显示我不支持它的消息，我的问题是我不知道我不支持它，因为我以前不能使用诸如 modiernizr 之类的库我的 webpack 加载