TypeScript에 UglifyJs 적용하기

programmingtypescript
, ,

TypeScript에 Babel 없이 UglifyJs 적용

Vue에 TypeScript를 적용하던 중 당황스러운 버그에 종착했다.
분명히 다양한 Boilerplate를 참고했음에도 불구하고 webpack에서의 빌드는 정상적이지만

Vue App이 브라우저에 올라갈 때 오류가 뜨는 것이다.

1
2
3
4
Failed to compile.

bundle.js from UglifyJs
Unexpected token: name (urlParts) [bundle.js:12412,4]
1
2
ERROR in bundle.js from UglifyJs
Unexpected token: name (urlParts)

확인해보니 UglifyJS는 ES6를 지원하지 않는다고 한다.

TS => JS 변환된 파일을 Babel로 ES5로 변환한 후에 적용하면 된다는 데…

TypeScript는 컴파일 옵션을 통해 컴파일 타겟을 ES5로 설정 가능하기 때문에 굳이 Babel을 사용할 필요가 없다.

이 점이 굉장히 찜찜하여 더 검색을 해본 결과

기본적으로 webpack에서 제공해주는 UglifyJS 플러그인이 아니라 설치를 해서 옵션을 주면 가능하다는 것

별도의 플러그인을 설치

1
npm i -D uglifyjs-webpack-plugin

webpack.config.js

1
2
3
4
5
6
7
8
9
var UglifyJSPlugin = require('uglifyjs-webpack-plugin');

plugins: [
  new UglifyJSPlugin({
    uglifyOptions: {
      // 옵션 적용
    }
  })
]

허무하게 해결이 되긴 했지만 외국에서는 TypeScript with Babel 문제 의견이 분분하다.
TypeScript를 적용할 때 다양한 자료를 참고한다면 최대한 최신 자료를 참고해야 하며
이슈 목록을 체크해 사전에 삽질을 방지해야 한다.

Share Comments