IE - es6 삽질하기

상황

Webpack을 사용하는 Vue페이지.
Chrome에서는 잘 뜨던 페이지가 IE에서 뜨지 않는다!

원인 파악하기1

1. 개발자 모드를 켜본다.
2. 새로고침을 하고 콘솔로그를 살펴본다.

   SCRIPT1002: 구문오류
   build.xx.js

3. 클릭하면 디버거 탭으로 전환되면서 구문오류가 있는 부분이 보인다.
4. es6에서 사용하는 화살표 함수가 보인다.
5. babel을 사용하고 있는데 왜?

원인 파악하기2

내 PC에서만 되지 않는다.
Package가 문제일까?
다른 사람의 package-lock.json을 받아서 설치해보자.

1. npm ci 명령어를 활용하면 package-lock.json을 이용해서 설치를 할 수 있다.
2. 설치를 해본다.
3. 그래도 안된다. 왜징?

원인 파악하기3

이 프로젝트는 webpack, babel을 사용하고 있다.
설정을 다시 뜯어본다.

1. babel.config.js
   • preset을 본다.
   • target이 > 0.25%, not dead이다. 뭐징 이정도면 es5로 다 변환되어야 하는거 아닌지
2. webpack.config.js
   • babel은 잘 동작하고 있는 듯 하다.
   • babel이 es5로 바꿔줘야 하는 파일에 뭔가 누락되어있는 건 아닌지?
3. 디버거로 화살표 함수가 남아있는 구간을 다시 살펴본다.
4. 하지만 이미 컴파일이 되어 이게 무슨 패키지인지 도저히 알 수가 없다😱
5. 아쉬운대로 주변의 알아볼 수 있는 텍스트 구간을 살펴본다.
6. 패키지를 유추할 수 있는 텍스트가 있다.
7. npm install 할 때 뭔가 메시지가 떴던 패키지가 의심스러워진다.
8. main.js에서 이 패키지를 import하고 있는 코드를 주석처리 해본다.
9. 페이지가 잘 뜬다! 범인은 바로 너!

해결하기

1. babel-loader에 문제가 되는 패키지를 추가해보자.
2. 그런데 이미 이 패키지가 추가되어 있다.
3. 이 패키지에서 사용하는 다른 패키지가 문제인 듯하다.
4. build.xx.js를 자세히 살펴보면 var something = __webpack_require(1234); 와 같은 형식인 경우가 있는데 이 때 something이 package 이름 같다!
5. 문제가 되는 package를 모두 babel-loader에 include 시켜준다.
6. npm run dev로 실행 후 정상이 되었다!