时间戳

首页 > 解决方案 > uglify / webpack for production 之后的每个类的 Class.name 始终为“e”

javascript - uglify / webpack for production 之后的每个类的 Class.name 始终为“e”

问题描述

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

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

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

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

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

有任何想法吗？

标签： javascriptwebpackecmascript-6uglifyjses6-class

解决方案

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

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

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

或者：

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

推荐阅读