typescript - 如何使用 Typescript 和 Webpack 对类使用 tree-shaking？

Question

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

汽车.ts

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

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

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

引擎.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 或这些工具的编排的错误。 我正在使用带有 es2015 模块和 Webpack 2.1.0-beta.21 的 Typescript 2.0-dev。

Answer 1

关键是输出ES2015模块和代码，然后在上面运行Babili minifier。它正确地进行了 tree-shaking。