UglifyJS로 ES2015 minify

UglifyJS는 JavaScript 코드를 minify하거나 난독화하는 도구입니다.
UglifyJS를 사용하여 ES2015 코드를 minify하는 방법을 적어 둡니다.

2017년 10월 추가

월일은 흘러 현재 ES2015+ 대응의 브랜치는 별도 라이브러리로서 npm 에 등록되어 있는 것 같습니다. 그 이름도 uglify-es !!

npm 명령으로 설치할 수 있습니다.

$ npm install uglify-es -g

설치된 명령 이름은 여전히 ​​uglifyjs 같네요.

$ uglifyjs [input files] [options]

이하, 지금은 오래된 내용이지만 ↓↓

샘플 코드

적당히 Hello,world 하는 코드를,

input.js

'use strict';

document.addEventListener('DOMContentLoaded', (e) => {
  let name = 'world';

  document.querySelector('.foobar').textContent = `Hello,${name}!`;
}, false);

let 키워드, 화살표 함수, 템플릿 문자열을 사용해보십시오.
이것을 minify합시다.

정상적으로하면 오류를 토하고 이끼

우선 공식 리포지토리 에 쓰여진 대로 보통으로 인스톨 해 보통으로 실행해 보겠습니다.

$ npm install uglify-js -g
$ uglifyjs --compress --mangle -- input.js

그러면





화살 함수에서 Parse Error를 토하고 중지합니다.
그 외, let 키워드·템플릿 캐릭터 라인·제네레이터 함수등도 용서해 주지 않는 것 같습니다. 멋지다.

Issue가 올랐다.

뭐 당연히 요망이 오르네요. Issue가있었습니다.

Harmony support · Issue #448 · mishoo/UglifyJS2

흐름을 쫓아 가면,

ES2015 지원은 harmony 브랜치에서 진행 중입니다

그 중 master에 병합 될 예정

라는 것.

harmony 브랜치 시도

먼저 조금 전 설치한 것을 제거합니다.

$ npm remove uglify-js -g

예,

다시 GitHub에서 설치하십시오. 시도해 봅시다.
npm은 Git 리포지토리의 URL을 직접 지정하여 리포지토리에서도 설치할 수 있습니다.# 다음에 브랜치를 지정하면 master 이외의 브랜치에서도 설치할 수 있습니다.

$ npm install -g https://github.com/mishoo/UglifyJS2.git#harmony
$ uglifyjs --compress --mangle -- input.js

완료

주의점

npm 버전이 오래되면 https를 통해 설치하지 못할 수 있습니다.
설치 중에 실패하는 경우 npm update -g npm에서 npm을 최신으로 시도하십시오.