为什么这是 IE11 和 Pale Moon 中的错误？

Question

我在 FreeNAS 团队 bug tracker 上报告了一个 Javascript 错误，与他们即将发布的版本有关，由于一些不太常见的浏览器上的 JS 语法错误，该版本将无法运行，但我我很好奇为什么这是一个错误。

该代码片段在 Win8.1 默认浏览器 (IE11) 和 Pale Moon（基于 Firefox）浏览器上引发了一个定义明确的错误，但在 Firefox 或 Vivaldi（基于 Chrome）上没有错误。代码实际上做了什么，为什么它会在这些浏览器中触发保留字 error/syntax 错误？

代码很难追踪，它看起来像一个 webpack 缩小文件，我对基础 + 构建系统还不够熟悉，无法在打包之前跟踪它的最终来源。

触发错误的相关代码片段在浏览器控制台中如下所示：

webpackJsonp([20], {

  ... long list of function defs ...

  BFiu: function(t, e, n) {
    "use strict";
    n.d(e, "a", function() {
      return r
    });
    var o = n("HcJ8");
    n.n(o);
    let i = {
      Queue: 0,
      Uploading: 1,
      Done: 2,
      Cancelled: 3
    };
    i[i.Queue] = "Queue",
    i[i.Uploading] = "Uploading",
    i[i.Done] = "Done", 
    i[i.Cancelled] = "Cancelled";
    class r {}
  },

  ... more function defs ...

},
[0]);

根据 JS 控制台，是行 class r{} 在某些浏览器中导致致命语法错误，并终止 GUI 加载脚本。 Pale Moon 表示问题是滥用保留字 "class"，IE11 只是指向同一个字并报告语法错误。但是在其他浏览器上没问题。

凭直觉，我希望即使在众所周知的不同浏览器和 JS 引擎中，滥用这样一个关键 JS 词的保留字也能得到相当明确的定义（显然不是？），所以我很感兴趣。怎么回事？

理想情况下（如果能够提供帮助），我如何找到此代码片段的上游源代码，以便查看其 issue/bug 跟踪器？

源代码：代码片段来自FreeNAS 11.2-RC2中的一个文件"main.57ebfd2da123881a1a70.bundle.js"。我已经在 FreeNAS build/WebUI 系统中追踪到 this file 的第 69 行，在 webpack 构建它时显然引用了文件名，但我不知道如何追踪到它origin，以查看此代码段来自哪个模块，或者是否存在关于该模块来自哪个项目的上游错误报告。

Answer 1

class 是一个 ES6 (ES2015) 关键字，适用于大多数浏览器，但不适用于 IE（IE 的最新版本 IE11，于 2013 年发布）等古老的浏览器。尽管 PaleMoon 表示他们 mostly ES6 compliant, it doesn't appear to support class yet - the founder 的意见是：

Classes in JS are simply a really, really bad idea, trying to enforce OO structures from a different language to something that is simply not designed to do things that way.

There's also no reason to use classes per se, as anything done with classes can be done with basic and completely compatible use of JS prototypes. Prototyping is there for a reason; use it.

使用“class”语法并希望他们的代码与 IE、PaleMoon 和其他不符合标准的浏览器兼容的开发人员的一般解决方案是集成 Babel into their build process, which can automatically transpile a codebase's ES6+ syntax (including the "class" keyword) into ES5 syntax. For example：

class Foo {
}

变成

"use strict";

function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }

var Foo = function Foo() {
  _classCallCheck(this, Foo);
};

为什么这是 IE11 和 Pale Moon 中的错误？

Why is this an error in IE11 and Pale Moon?

javascript

debugging

webpack

internet-explorer-11

palemoon