Почему это ошибка в IE11 и Pale Moon?

Question

Я сообщил об ошибке Javascript команде FreeNAS на их баг-трекере , связанной с их предстоящим выпуском, который не будет работать из-за синтаксической ошибки JS в некоторых менее распространенных браузерах, но мне любопытно почему это ошибка.

Фрагмент кода вызывает довольно четко определенную ошибку в браузерах по умолчанию в Win8.1 (IE11) и Pale Moon (на основе Firefox), но не возникает в Firefox или Vivaldi (на основе Chrome).Что на самом деле делает код и почему он запускает зарезервированное слово error / syntax error в этих браузерах?

Код трудно отследить, он выглядит как минимизированный файл веб-пакета, и я недостаточно знакомс системами base + build, чтобы следовать, где он в конечном итоге берет свое начало перед упаковкой.

Соответствующий фрагмент кода, который вызывает ошибку, выглядит в консоли браузера следующим образом:

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 (очевидно, нет?), Так что я заинтригован.Что происходит?

В идеале (если он может помочь), как мне найти исходный код для этого фрагмента кода, чтобы я мог взглянуть на его трекер проблем / ошибок?

Исходный код: Фрагмент кода взят из файла "main.57ebfd2da123881a1a70.bundle.js" в FreeNAS 11.2-RC2.Я проследил это до строки 69 из этого файла в системе сборки / WebUI FreeNAS, где на имя файла ссылается, очевидно, когда его собирает webpack, но я не могу понять, как отследитьего происхождение, чтобы узнать, из какого модуля этот фрагмент, или если есть отчет об ошибке в вышестоящем проекте, из которого пришел модуль.

Answer 1

class - это ключевое слово ES6 (ES2015), которое работает в большинстве браузеров, но не в древних, таких как IE (последняя версия IE, IE11, была выпущена в 2013 году).Хотя PaleMoon заявляет, что они в основном ES6-совместимые, похоже, он пока не поддерживает class - мнение основателя :

Классы в JS - это просто очень, очень плохая идея, пытаться навязать ОО-структуры от другого языка к чему-то, что просто не предназначено для таких вещей.

Нет также причин использовать классы как таковые,как все, что делается с классами, может быть сделано с базовым и полностью совместимым использованием прототипов JS.Прототипирование существует по причине;используйте его.

Общее решение для разработчиков, которые используют синтаксис "класса" и хотят, чтобы их код был совместим с IE, PaleMoon и другими нестандартными браузерами, заключается в интеграции Babel в процесс сборки, который может автоматически преобразовывать синтаксис ES6 + кодовой базы (включая ключевое слово "class") в синтаксис ES5. Например :

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);
};