无法显示浏览器支持消息

Question

嗨，我的项目正在使用reactjs和webpack，加载网站时，如果在不支持reactjs或webpack的旧浏览器上运行时，我无法显示我的浏览器。我检查现代库库的支持）。我有没有办法在以某种方式加载之前显示消息并使用现代化？也许某种程度上使用可以在HTML文件中使用现代化的脚本的脚本？任何答案都将受到欢迎！（这需要在所有浏览器上使用）。感谢您的帮助！

Answer 1

如果您确切知道您使用的功能和旧浏览器不支持您可以执行的操作，例如可选地加载" 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>