Question

我有一大堆JS库，我应该重写，因为它真的很旧而且已经过时了。所以，我决定提出一个解决方案，我将使用大多数 ES2015 功能，例如rest parameters。

问题是，我相信所有客户都不会对他们的浏览器进行更新，我很困惑我是否会遇到任何关于他们的浏览器与我的新JS库兼容的问题。

所以，我想知道我是否可以检测客户端浏览器是否与ES2015兼容。如果没有，我只想包括我的旧JS库。

我正在寻找像Conditional comments这样的解决方案，但我无法解决问题。

赞赏HTML，JS或PHP方面的任何帮助。请建议你的建议。

Answer 1

我想知道我是否可以检测客户端浏览器是否存在与ES2015兼容。如果没有，我会包括我的旧JS 库。

你不能这样做，因为AFAIK没有完全支持ES2015的浏览器。另外，你真的不想维护两个不同版本的代码，因为它很痛苦，而且很快就会变得混乱。

现在的方法是使用 transpiler ，它是一种编译器，可以将ES2015代码编译为ES5（每个浏览器都知道的JavaScript）。它仍然有点混乱，但至少你只能编写一个版本的代码，而且它是ES2015。

我认为Babel（原为6to5）是最受欢迎的转录程序。您可以查看他们的网站以便开始使用。

至于回答你的实际问题，

如何检测浏览器是否与ES2015兼容

你可以通过多种方式做到这一点。我不确定什么是最可靠的，但是例如你可以试试浏览器的控制台：

'Promise' in window

如果此语句返回true，则当前浏览器支持promises，这是ES2015的新功能，因此您可以假设它支持ES2015的大部分功能。

但这对大多数情况来说还不够;您可能希望100％确定您正在使用的内容不会在任何旧浏览器中抛出SyntaxError。

解决方案可以是手动检查您要使用的每个功能。例如，如果您需要Fetch API，您可以创建一个函数，告诉您当前浏览器是否支持它：

function isFetchAPISupported() {
    return 'fetch' in window;
}

您可以为所需的任何新API执行此操作。但是，如果你需要语法不同的东西，我认为你唯一的赌注是eval()（正如Katana314建议的那样）。例如，为了检查对休息参数的支持，您可以这样做：

function isRestSupported() {
    try {
        eval('function foo(bar, ...rest) { return 1; };');
    } catch (error) {
        return false;
    }
    return true;
}

这在Firefox中很有用，因为支持其余参数。它也可以在Safari上运行，返回false，因为其余参数尚未支持。

如何检测浏览器是否与ES2015兼容

1 个答案: