Question

我在file car.ts中有一个名为Car的类，另一个file engine.ts中的引擎有两个类。

car.ts

import { V8Engine, Engine } from './engine';

class SportsCar {
  constructor(private engine: Engine) {}

  toString() {
    return this.engine.toString() + ' Sports Car';
  }
}

engine.ts

export interface Engine {
  toString(): string;
}

export class V6Engine implements Engine {
  toString() {
    return 'V6';
  }
}

export class V8Engine implements Engine {
  toString() {
    return 'V8';
  }
}

export function getVersion() {
  return '1.0';
}

console.log(new SportsCar(new V8Engine()).toString());

car.ts文件只导入V8Engine类，但V6Engine类也会出现在缩小文件中。从engine.ts导出的未使用的函数被剥离。

在没有UglifyJS插件的情况下运行Webpack时，V6Engine类按预期标记为/* unused harmony export V6Engine */。但是在添加插件后，我从UglifyJS收到了这条警告消息：

WARNING in car.prod.bundle.js from UglifyJs
Dropping unused function getVersion [car.prod.bundle.js:89,9]
Side effects in initialization of unused variable V6Engine [car.prod.bundle.js:73,132]

我有created a repository可以重现问题。克隆，安装和运行npm run webpack和npm run webpack-prod会重现此问题。

不知道这是否是Typescript转换，UglifyJS或这些工具的编排的错误。我使用的是Typescript 2.0-dev和es2015模块以及Webpack 2.1.0-beta.21。

Answer 1

关键是输出ES2015模块和代码，然后在其上运行Babili minifier。它正在向右摇晃。

如何使用Typescript和Webpack对类进行树抖？

1 个答案: