IE11 에서 동작하지 않음

문제

현재 리포지토리는 IE11 에서 동작합니다. 설정은 다음과 같습니다.

https://github.com/906bc906/personal-webpack-babel-boilerplate/blob/20a8032bccebb9ea2f4ba9c19e3618c358cb8a12/.browserslistrc#L1

https://github.com/906bc906/personal-webpack-babel-boilerplate/blob/20a8032bccebb9ea2f4ba9c19e3618c358cb8a12/babel.config.json#L1-L13

browserslist 를 > 0.2% 로 잡아 IE 11이 포함된 상태입니다. 이 경우 디버그로 출력되는 타겟은 아래와 같습니다.

Using targets: {
  "android": "4.4.3",
  "chrome": "102",
  "edge": "103",
  "firefox": "103",
  "ie": "11",
  "ios": "12.2",
  "opera": "89",
  "safari": "13.1",
  "samsung": "17"
}

사실 이전에 시도한 방법은 browserlistsrc 없이 babel.config.json 에서 타겟을 지정하는 것이었는데, 이 방법으로는 IE11에서 동작하지 않았는데 그 이유를 모르겠습니다.

재현 방법

.browserslistrc의 이름을 변경하여 babel이 찾지 못하도록 합니다 (예를 들어 ..browserslistrc)
babel.config.json의 7번째 줄의 주석을 제거하여 타겟을 ie 11로 지정합니다
- 또는 "targets": {"ie": "11"},

이후 npx webpack --mode development 로 빌드하고 public/index.html을 IE 11 로 열면 아무 것도 뜨지 않습니다.

Using targets: {
  "ie": "11"
}

디버그로 출력되는 타겟은 분명히 ie를 인식하고 있습니다.

콘솔은 위와 같습니다.

콘솔의 index.js(1, 14) 를 클릭하면 error.js 로 이동하는데, 소스맵이 제대로 연결되지 않은 것 같습니다. (error.js 전체를 주석처리해도 error.js로 연결됐습니다)

정리하면 아래와 같습니다.

브라우저 타겟	설정 위치	결과
> 0.2%	.browserslistrc	O
> 0.2%	babel.config.json	X
IE 11	.browserslistrc	O
IE 11	babel.config.json	X

궁금한 것

왜 .browserslistrc로 뺐을 때만 IE 11에서 정상 동작하는지 이유를 알고 싶습니다.
IE 콘솔 에러에서 왜 소스맵이 정상적으로 연결되지 않는지 알고 싶습니다. (크롬에서는 소스맵이 정상 동작하는 것을 확인했습니다)
2022년에, 국내 점유율 0.4%인 IE 사용자를 위해 실무에서도 실제로 ES5 트랜스파일을 하고 있는지 궁금합니다.

(1. + 2.) babel과 browerslistrc의 내부 동작을 알지는 못해 확신할 수는 없지만, 바벨의 트랜스파일링 방식이 IE와 충돌하는 것이 아닐까 합니다. 오래 된 글이지만 IE에서 sourcemap을 지원할 "계획" 이라는 글(https://blog.oio.de/2014/04/04/internet-explorer-11-source-map-based-debugging/) 이 있는데, 결국 지원하지 않는 채로 마무리된 것일지도 모르겠습니다. browserlistrc를 이용했을 때와 babel을 이용했을 때 빌드된 결과물의 차이점을 확인해 보시면 좋을것 같습니다.

대부분 고려하지 않습니다. 네이버 등 전국민이 사용하는 서비스의 경우 일부 서비스를 제공하지만 조금씩 종료하고 있는 것으로 인지하고 있습니다. 최근 네이버 QR코드 관련 서비스도 IE 지원을 중단한 것으로 보입니다.
https://qr.naver.com/notice/board.naver?id=5767

906bc906 / personal-webpack-babel-boilerplate

IE11 에서 동작하지 않음 #2

문제

궁금한 것