UglifyJS 不会破坏 TypeScript 生成的 JavaScript 中的函数名称答案

【问题标题】：UglifyJS does not mangle function names in TypeScript-generated JavaScriptUglifyJS 不会破坏 TypeScript 生成的 JavaScript 中的函数名称
【发布时间】：2017-12-23 02:47:59
【问题描述】：

我有一个简单的 TypeScript 类，我将其转换为 ES5，然后与 webpack 2 捆绑并使用 UgilfyJS3 最小化。

我希望 UgilfyJS 也会破坏函数名称 showGreeting()（见下面的代码），但在缩小的 js 文件中，它不是。我可以设置任何其他选项来缩小函数名称还是我在做一些磨损的事情？我知道变量名没有错位，但为什么不是函数名？

这是原始的 TypeScript 文件：

export class Greeter {
    constructor(greeting: string) {
        this.greeting = greeting;
    }

    greeting: string;
    showGreeting() {
        console.log(this.greeting);
    }
}

const myGreeter = new Greeter("hello, world");
myGreeter.greeting = "howdy";
myGreeter.showGreeting();

这是包含 UglifyJS 的 webpack.config：

const path = require('path');
const webpack = require('webpack');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
module.exports = {
    entry: './test.ts',
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'dist')
    },
    devtool: "source-map",
    resolve: {
        extensions: ['.ts', '.tsx', '.js']
    },
    module: {
        loaders: [
          { test: /\.tsx?$/, loader: 'ts-loader' }
        ]
    },
    plugins: [
        new UglifyJSPlugin({
            mangle: {
                toplevel: true,
                eval: true
            }
        }), 
]
};

并且生成的输出 Javascript 包含以下几行：

[function (e, t, r) {
            "use strict";
            Object.defineProperty(t, "__esModule", {
                value: !0
            });
            var n = function () {
                function e(e) {
                    this.greeting = e
                }
                return e.prototype.showGreeting = function () {
                    console.log(this.greeting)
                },
                e
            }
            ();
            t.Greeter = n;
            var o = new n("hello, world");
            o.greeting = "howdy",
            o.showGreeting()
        }
    ]);

【问题讨论】：

标签： javascript typescript webpack uglifyjs

【解决方案1】：

类成员是对象属性，UglifyJS 不会破坏属性名称。这里是an explanation。

Google 的 Closure 编译器 可以完成这项工作。但是很难用，with limitations。

【讨论】：

一种“丑陋”的替代方法是在类成员的任何内容前加上下划线（变量、函数），并将 Uglify 配置为破坏所有以“_”开头的属性 - mangleProperties: { regex: /^ _/ }