Webkit ES6 Bug (declare var twice)

내가 발견한 버그는 아니다. JS가 Minify 된 후 다음의 에러와 함께 Cannot declare a let variable twice: 'e'. 정상적으로 작동되지 않는 경우를 발견했다. 이 버그에 영향 받는 것은 safari 10 버전이라고 한다. 밑으로는 얼마나 영향 받는지 모르겠지만, Sierra와 iOS10의 사파리는 이 버그를 가지는 것으로 확인했다.

let e = e => {
    console.log(e);
    for (let e of [1, 2, 3]) // Cannot declare a let variable twice: 'e'.
        console.log(e);
};

scope level이 다름에도 불구하고 아예 돌아가지도 않는다는 것. 보통의 경우에서는 발생이 힘든 느낌이 있지만, UglifyJS와 같은 툴을 사용한다면 얘기가 달라진다. 일단, 나는 고통받았다ㅎㅎ..

일단 내가 겪은 프로세스는 다음과 같은데…

1. 처음에 UglifyJS 2.x 버전을 사용하는, webpack.optimize.UglifyJSPlugin에 있는 그 녀석은 ES5? ES6? 코드를 파싱하지를 못했다.
2. 찾다보니, mangle.safari10라는 옵션으로 safari10 버전에서 발생하는 이 버그를 고쳐주는 옵션이 있는 UglifyJS#harmony를 찾았다.
   1. 이게 참 이상한 녀석인게, 브랜치는 깃허브의 UglifyJS2#harmony에 있으면서, npm repo의 이름은 uglify-es다.
   2. 현재 stable 버전인 0.4.6은 webpack에 기본 탑재된 녀석과 같은 플러그인이므로, 1.0.0-beta.2를 사용하여 UglifyES를 사용하게 바꾸고 mangle.safari10: true를 사용해 옵션을 넣어줬지만, 여전히 버그가 발생했다.
3. minify plugin을 webpack config에서 제거해봤다. 용량이 폭발적으로 늘어나는 것을 확인할 수 있었다.
4. google-closure-compiler로 갈아타봤다. 얘는 압축정도를 넣어줄 수 있었는데, simple을 넣나 advanced를 넣나 에러가 안 뜨지는 않아서 포기했다. sourcemap도 미지원.
5. 그래서 결국 babel-minify로 왔다. 얘는 잘 작동하고, 심지어 압축된 용량도 가장 작다.