javascript - UglifyJS - Mangle 函数但保留 Function.prototype.name

Question

使用 UglifyJS 时，函数名称会被破坏，除非 keep_fnames 设置为 true。例如，以下 Typescript 代码:

class Test {}
console.log(Test.name);

编译为 JS 为:

function Test() {}
console.log(Test.name);

将被丑化为:

function t() {}
console.log(t.name);

并输出 t 而不是 test 到控制台。

有没有办法(other than using keep_fnames option)在丑化后保留 name 属性？ (我不想使用 keep_fnames:true，因为它会大大增加包的大小。

我想到的可能的解决方案:

• 编写一个 Webpack 插件，硬编码函数名称 Test.name = 'Test'，但这不会起作用，因为 Function.prototype.name 是一个读取唯一的属性(property)；
• 使用 Typescript 装饰器、元数据和反射 API，但 design:type 元数据不会为类发出，它只会为属性发出(我相信这是因为 Function.prototype.name 存在，但我猜他们错过了这个边缘案例？)。

Answer 1

如其解释here , Function.prototype.name 在客户端代码中不能依赖，因为函数原名的信息会随着压缩过程被破坏。防止它被重命名是快速而肮脏的修复。

name 在某些浏览器中是只读的且不可配置的，所以做类似的事情

class Test {
  static get name() {
    return 'Test';
  }
}

或

function Test() {}
Object.defineProperty(Test, 'name', { configurable: true, value: 'Test' });

将在大多数浏览器中修复它，但会导致其他浏览器出现模糊的兼容性问题(例如，Android 4.x 浏览器)。

做到这一点的正确方法是从不依赖客户端代码中的 name 除了调试之外的任何事情。至于Node.js和Electron，就看代码是否需要混淆了。

如果类或函数应该存在字符串标识符，则可以选择另一个静态属性名称，例如id 或不受支持但常规 displayName .