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

时间:2018-10-12 10:42:06

标签: javascript reactjs cross-browser create-react-app safari9

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

我想解决的办法是让Babel用常规的var关键字重新编译整个应用程序,但是我担心这样做会导致网站速度下降。您对此有任何想法/经验吗?

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

* 我们正在https://www.myjobglasses.com 托管一个ReactJS应用,该应用来自弹出的create_react_app

2 个答案:

答案 0 :(得分:0)

在上传之前,请使用Babel转换网站代码。根据我的经验,即使定位到较旧的浏览器,它也不会显着降低您的应用速度。

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

https://babeljs.io/docs/en/babel-preset-env

使用https://github.com/browserslist/browserslist进行检查时,您可以定义转译将遵循的不同规则,因此-结果总会有有效的代码,例如(摘自preset-env文档):

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

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

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

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

答案 1 :(得分:0)

使用 Modernizr 之类的软件包怎么样?您可以检查客户端的浏览器是否支持某些已知在Safari中失败的功能,并将其包含在Modernizr支持中。我认为这很简单。检出 Modernizr here

此外,此答案可能会有用:https://stackoverflow.com/a/13480430/7868769