处理不支持 `const` 关键字的浏览器答案

【问题标题】：Handle browsers that do not support the `const` keyword处理不支持 `const` 关键字的浏览器
【发布时间】：2018-10-12 10:42:05
【问题描述】：

我最近遇到了使用旧设备的用户，他们的浏览器（主要是 Safari 9）引发 JS 错误，因为他们没有实现我们在现代 SPA 应用程序中使用的 const 关键字*。

我想一个解决办法是让 Babel 使用常规的 var 关键字重新编译整个应用程序，但我担心这样做会降低网站的速度。您对此有什么想法/经验吗？

如果我们决定支持此类浏览器，有没有办法为这些浏览器编译网站版本？我听说可以对 javascript 文件使用媒体查询。方便吗？

*我们在 https://www.myjobglasses.com 托管一个 ReactJS 应用程序，它来自一个弹出的 create_react_app

【问题讨论】：

你试过使用var吗？我真的不认为你会遇到速度问题。
你尝试过使用 babel-polyfill 吗？
我担心这样做会影响网站的速度。你对此有什么想法/经验吗？ 如果这是真的，没有人会使用 Babel。你需要它来进行正常的 React 开发。 来自一个弹出的 create_react_app - CRA 已经在使用 Babel，不是吗？使用它。这就是它的用途。

【解决方案1】：

在上传之前使用 Babel 转译网站代码。根据我的经验，即使针对较旧的浏览器，它也不应该显着降低您的应用速度。

Babel 有一个很棒的工具可以为特定浏览器转译代码，称为babel-preset-env：

当它使用这个：https://github.com/browserslist/browserslist 进行检查时，您可以定义您的转译将遵循的不同规则，因此 - 您将始终拥有工作代码，例如（取自preset-env 文档）：

{
  "targets": "> 0.25%, not dead"
}

{
  "targets": {
    "chrome": "58",
    "safari": "9"
  }
}

另一个想法 - 如果您想更深入地研究，您实际上可以准备两个包并根据浏览器版本有条件地加载它们（因此，基本上，对于 Safari 的这种特定情况）。

这将要求您在连接到服务器时以某种方式检测浏览器（例如通过 User-Agent）并提供不同的捆绑包，但这是可行的 ;)

【讨论】：

【解决方案2】：

使用像 Modernizr 这样的包怎么样？您可以检查客户端的浏览器是否支持在 Safari 中众所周知会失败的某些功能，并将其包含在您的 Modernizr 支持中。我认为这很简单。查看 Modernizr here

【讨论】：

恐怕这与语言功能无关，而是一种语言keyword，它甚至与语言功能是否可用无关，恐怕......在输入const Modernizr 搜索引擎一无所获。问题也不在于检测浏览器/