Question

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

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

该代码很难追踪，它看起来像是一个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）指出问题是滥用了保留字“类”，IE11只是指向同一个字并报告了语法错误。但是在其他浏览器上也可以。

直觉上，我希望即使在众所周知的不同浏览器和JS引擎（显然不是这样）之间，这样的JS关键单词的保留字滥用也会得到很好的定义，所以我对此很感兴趣。发生了什么事？

理想情况下（如果有帮助的话），我如何找到此代码段的上游源代码，以便查看其问题/错误跟踪器？

源代码：该代码段来自FreeNAS 11.2-RC2中的文件“ main.57ebfd2da123881a1a70.bundle.js”。我已经在FreeNAS build / WebUI系统中将其追溯到this file的第69行，该文件名显然是在webpack构建时引用的，但是我无法弄清楚如何追溯到它的起源，可以查看此代码段来自哪个模块，或者该模块来自哪个项目的上游错误报告。

Answer 1

class是适用于大多数浏览器的ES6（ES2015）关键字，但不适用于IE等古老的浏览器（IE的最新版本IE11，于2013年发布）。尽管PaleMoon声明它们符合mostly ES6规范，但它似乎还不支持class-founder的意见是：

JS中的类只是一个非常非常糟糕的主意，它试图将OO结构从另一种语言强制转换为某种并非旨在以这种方式完成的事情。

也没有理由使用类本身，因为使用类完成的任何事情都可以通过基本且完全兼容的JS原型来完成。进行原型设计是有原因的；使用它。

使用“类”语法并希望其代码与IE，PaleMoon和其他不符合标准的浏览器兼容的开发人员的一般解决方案是将Babel集成到其构建过程中，该过程可以自动进行将代码库的ES6 +语法（包括“ class”关键字）转换为ES5语法。 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中的错误？

1 个答案: