ecmascript 6 - Hogyan lehet osztályokhoz tree-shakinget használni Typescript és Webpack segítségével?

Van egy Car nevű osztályom a car.ts fájlban, és két másik osztály a motorokhoz egy másik fájlban, az engine.ts-ben.

autó.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());

A car.ts fájl csak a V8Engine osztályt importálja, de a V6Engine osztály még a minifikált fájlban is megjelenik. Az engine.ts-ből exportált, nem használt függvényt eltávolítják.

Amikor a Webpacket UglifyJS plugin nélkül futtatjuk, a V6Engine osztály a várt módon a /* unused harmony export V6Engine */ jelzéssel van megjelölve. De a plugin hozzáadása után ezt a figyelmeztető üzenetet kapom az UglifyJS-től:

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]

Létrehoztam egy tárolót, ahol a probléma reprodukálható. A npm run webpack és a npm run webpack-prod parancsok klónozása, telepítése és futtatása reprodukálja a problémát.

Nem tudom, hogy ez egy hiba a Typescript átalakításában, az UglifyJS-ben vagy ezeknek az eszközöknek az összehangolásában. Typescript 2.0-dev verziót használok es2015 modulokkal és Webpack 2.1.0-beta.21 verzióval.

Válasz #1

A kulcs az, hogy ES2015 modulokat és kódot állítsunk elő, majd futtassuk rajta a Babili minifájlt. Ez végzi el helyesen a tree-shakinget.