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

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

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

如果函数/类名用于调试以外的任何用途，则应将它们显式指定为静态属性。由于 name 在某些引擎中无法重新定义，non-standard displayName (也可用于调试)或可以使用任何其他属性名称:

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

或者:

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