在用于生产的 uglify / webpack 之后，每个类的 Class.name 始终为 'e'

Question

我有一个在开发环境中运行良好的应用程序，但它在生产环境中不起作用，这是由 uglify 引起的（我认为是）

我有一个用户构建的数据，我将它保存到文件或 LocalStorage（两种情况下都是 json，所以无关紧要）。

该结构由 3 种类型的节点构成。我已经在基类中实现了属性（都继承自一个类）：type =this.constructor.name并且它在开发中运行良好。当我加载应用程序并读取缓存时，我会遍历 JSON 并使用switch (obj.type) case class1.name...等方法重建对象。它运行良好。

但是，当我为生产而构建时，当我调用class1.nameorclass2.name或class3.name它全部返回时e，这使得无法恢复正确的对象......

我不认为这是特定于框架的问题，但是如果有人需要知道我使用 VueJS 和 Quasar Framework 进行构建。

有任何想法吗？

Answer 1

constructor.name或者任何其他函数name属性都不应该在客户端 JavaScript 中依赖，正是因为在生产环境中缩小是必须的，并且具有有意义名称的函数成为单字母命名的函数。e是使用 UglifyJS 缩小的函数的通用名称。这就是为什么 uglified JS 文件比 unminified 文件占用空间少得多的原因。

如果函数/类名称用于除调试之外的任何其他用途，则应将它们明确指定为静态属性。由于name在某些引擎中无法重新定义，因此可以使用非标准displayName（也可用于调试）或任何其他属性名称：

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

或者：

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