Class.name всегда 'e' для каждого класса после uglify / webpack для производства

Question

У меня есть приложение, которое отлично работает в среде разработки, но оно не работает в производстве, что вызвано uglify (я так думаю)

У меня есть данные, которые собирает пользователь, и я сохраняю их либо в файл, либо в LocalStorage (в обоих случаях json не имеет значения).

Структура построена из 3 типов узлов. Я реализовал свойство в базовом классе (все наследуются от одного класса): type =this.constructor.name, и оно отлично работает в разработке. Когда я загружаю приложение и читаю кеш, я прохожу через JSON и перестраиваю объекты, используя switch (obj.type) case class1.name... и т. Д. Это работает хорошо.

Однако, когда я строю для производства, когда я звоню class1.name или class2.name или class3.name, все это возвращает e, что делает невозможным восстановление надлежащих объектов ...

Я не думаю, что это проблема, специфичная для фреймворка, но если кому-то понадобится знать, я собираюсь использовать VueJS с Quasar Framework.

Есть идеи?

Answer 1

Для тех, кто придет после

Webpack использует UglifyJS , чтобы сжимать и скрывать аспекты вашего кода (называемые 'mangle'), в частности, что касается вашего вопроса, он преобразует все ваши классы в e, вы должны указать либо в ваш веб-пакет конфигурации или Cli, чтобы не делать этого, если вы хотите сохранить ваши имена классов и / или функций.

Вы можете отключить это поведение, удалив минимизацию или создав собственный экземпляр оптимизации, как показано здесь

Answer 2

constructor.name или любая другая функция name никогда не следует полагаться на клиентский JavaScript, именно потому, что минимизация является обязательной в производственной среде, а функции со значимыми именами становятся однобуквенными именованными функциями. e - это общее имя для функции, уменьшенной с помощью UglifyJS. Это причина, по которой укрупненный файл JS занимает гораздо меньше места, чем неунифицированный файл.

Если имена функций / классов используются не для отладки, они должны быть явно указаны как статические свойства. Поскольку name нельзя переопределить в некоторых движках, можно использовать нестандартный displayName (также может быть полезен для отладки) или любое другое имя свойства:

class Foo {
  static get id() { return 'Foo' }
  ...
}

Или:

class Foo {
  ...
}
Foo.id = 'Foo';