如果不支持浏览器，则显示错误消息

Question

在我的 Vue.js 应用程序中，我有以下内容package.json

  "browserslist": [

    "> 1%",

    "last 2 versions"

  ]

我相信 Babel 使用它来自定义生成的 JavaScript（其他构建工具也可能使用它）。如果用户尝试在不受支持的浏览器中加载应用程序，我是否可以利用此受支持浏览器列表来显示错误？

我可以编写一些 JavaScript 来检测用户代理并在浏览器不受支持时显示错误，但这可能需要我在 2 个地方维护支持的浏览器列表，我宁愿避免这样做。

Answer 1

首先，我想提一下，这样做可能不是一个好主意。浏览器的更新速度非常快，用户可能由于某些公司政策等原因无法经常更新。更好的方法是使用功能检测，检查浏览器是否支持特定功能。这可能需要做更多的工作，但给出了一个实际的理由来告诉人们他们的浏览器不受支持。您可以使用browserslist-useragent-regexp包从您的 browserslist 配置生成正则表达式。您可以将此正则表达式写入文件并使用它来测试navigator.userAgent您的配置是否支持。browserslist-useragent-regexp 存储库中的 README 文件包含一个示例设置。另一种选择是使用browserslist-useragent包，你可以给这个工具一个 user-agent 和一个 browserslist 配置来检查特定的 user-agent 是否匹配 browserslist 配置。此选项可能需要更多研究，因为它似乎首先针对 Node.js 应用程序。此选项似乎已被放弃，并且有一些不再维护的依赖项，因此请自行承担风险。如果您已经在项目中使用 Webpack 4，也可以使用obsolete-webpack-plugin ，它需要较少的设置。它可以与它一起使用HtmlWebpackPlugin并创建一个新块，当不支持浏览器时，它将在您的页面中插入一个 HTML 片段。