Question

我有一个简单的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();

这是webpack.config，包括UglifyJS：

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()
        }
    ]);

Answer 1

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

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

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

1 个答案: