Vite(react) production배포시 IE11호환 되지 않는 문제

저희 회사는 현재 터보레포로 프론트엔드 코드를 관리하고 있어요.
주요 서비스는 CRA 또는 NextJs로 구성되어 있고 공통으로 사용하는 패키지는
design/shared/api 3가지가 존재하고 해당 3가지의 패키지들은 Vite를 이용하고 있어요.

최근 저희 회사는 native app으로 만들어진 차량 리스트페이지를 모바일 웹(웹뷰)로 전환을 성공 하였어요.
하지만 차마 IE11에 대해 대응을 못했던 상황 이에요. 특히 모노레포로 관리되고 있던 패키지는 더욱 신경을 쓰지 못한 상황 이였어요

결국 패키지에서 관리하고 있던 shared에서 IE11에서 문제가 발생 하였습니다

#IE11에서 화살표 함수 에러

IE11에서 문제가 발생하여 콘솔을 확인 해보았어요

(위 사진) "SCRIPT1014 유효하지 않은 문자 입니다" 해당 로그을 살펴보겠습니다
(아래 오류는 센트리 버전UP을 진행 하였는데 해당 버전이 IE11은 지원하지 않아 생긴 오류에요 버전을 롤백하여 해결 하였어요)

 

(위 사진) 오류가 발생한 js파일은 packages/shared로 확인이 되었고 해당 소스를 살펴보니 ES6 문법인 화살표 함수가 사용되어 IE11에서 에러를 발생하고 있었습니다.

#IE11 화살표 함수 에러 해결 시도

tsconfig.json에 target: 'es6'문법을 es5로 바꾸고 확인을 다시 해보았습니다

(위 사진) 로컬 환경에서 build를 해보았는데 사진과 같이 const,let -> var로 바뀌었고 화살표 함수도 보이지 않았어요
(이대로 빌드하고 IE11에서 확인하면 정상 작동하는 것을 기대 하였어요)

#IE11 try/catch "(" 괄호 문법 에러

ES5로 바꾸어 빌드 후 테스트 환경으로 확인을 해보니... 새로운 에러를 마주쳤어요

 

(위 사진) 해당 js파일에 접근하여 확인해보니 catch에 ()가 없어 생기는 문제인거 같습니다. 대부분 catch문을 사용할때 catch(err){console.error(err)} 이런식으로 많이 사용을 하지만 실제 코드를 살펴보니 아래와 같은 문법을 사용한 케이스가 존재 했어요

(위 사진) 해당 문법을 찾아 catch(err){console.error(err)}으로 수정하였고 빌드를 해보니 console을 사용해도 esbuild 컴파일을 할때 console은 컴파일을 안해주는 것으로 확인을 하였습니다.

#IE11 try/catch "(" 괄호 문법 에러 해결(1)

결국 babel을 사용을 피할 수 없다고 생각이 들었고 babel 플러그인을 사용하기로 생각 했어요

#바벨을 사용하는 이유

바벨을 최대한 사용하고 싶지 않았지만 결국 IE11을 지원하기 위해서는 적용 할 수 밖에 없었어요 이유는

1. 브라우저 호환성: IE11은 최신 문법을 지원하지 않는다.
2. 개발자 경험 향상: 지원하지 않는다고 하여 최신문법을 쓰지 않으면서 개발을 할 수 없다(빠른 생산성을 위해)
3. vite(esbuild)는 기본적으로 es6이상 문법으로 컴파일링을 해줘요

#vite config 바벨 플러그인 적용

일단 어차피 바벨을 사용하기로 했으니 위에서 설정을 해준 target:"es5"를 다시 es6로 바꾸어주고 vite config 설정해줬어요

첫번째로 vite-babel-plugin을 시도를 했습니다
https://www.npmjs.com/package/vite-plugin-babel

(위사진) 빌드된 파일을 확인해보니 여전히 화살표 함수가 남아있습니다
아무래도 vite에서의 build는 rollupOptions를 사용하기 때문에 rollup플러그인을 사용해야 하나 생각을 했어요

롤업 바벨 플러그인을 찾았고 https://www.npmjs.com/package/@rollup/plugin-babel 바로 적용해보았어요
기본적으로 @rollup/plugin-commonjs 함께 사용하라고 해서 함께 설정을 해주었어요

!!하지만 위 사진과 같이 빌드 후 여전히 적용이 안되있는 상태에요
원래 webpack이나 config관련 작업은 쉽지 않죠... 열심히 vite문서와
rollup옵션을 구글링 해보았어요

한가지 새로운 사실을 알아냈는데, 저희는 vite build lib mode를 사용하는데 이것이 내부에서 esbuild가 강제적으로 이루어진다는 vite github 이슈를 확인했어요.

그리고 rollup에는 output설정을 하면 변화된 파일을 가지고 다시 재설정을 할 수 있는 것을 확인하였는데
문득 https://www.npmjs.com/package/@rollup/plugin-babel에서 보았던 "getBabelOutputPlugin"이 생각이 났고 적용 해보았어요

getBabelOutputPlugin은 컴파일이된 파일을 가지고 babel변환을 시켜준다 합니다. 그렇다면 lib mode에서 강제적으로 esbuild 완료 후 변환된 파일을 다시 babel로 컴파일 해주는 것으로 이해 했어요

lib: {
		entry: resolve(__dirname, 'src/index.ts'),
		name: '@encarpkg/shard',
		fileName: 'index',
	  },
		rollupOptions: {
				output: {
					plugins: [
						getBabelOutputPlugin({
							allowAllFormats: true,
							presets: [['@babel/preset-env']],
						}),
					],
				},
				plugins: [
					typescript({
						tsconfig: './tsconfig.json',
					}),
				],
		},

 

실행해본 결과 딱봐도 뭔가...많이 변했다 생각이 들었고 드디어 해결했다란 생각이 들었어요. 해결하였을때 이런 쾌감으로 여태 일을 하는거 같습니다!
문제가 되었던 catch를 검색했더니 catch문도 잘 컴파일링 되는 것을 확인하고 기분이 좋았어요

IE11 대응 성공

테스트 환경 배포 후 확인을 해보았습니다 🙏

무한로딩되던 차량리스트들이 몇가지의 css가 깨지긴 하지만 정상적으로 렌더링이 된 모습을 확인 할 수 있었습니다.

마무리

최근에 cra환경을 개발 환경에서만 vite로 실행시켜 작업 할 수 있게 작업을 했었는데요 build환경에 대해 조금은 익숙한 저에게 팀장님이 요청 주셔서 vite환경에서 IE11 대응을 해보았어요.

vite환경에 대해서 많이 안다고 생각하였는데 이번 작업을 계기로 플러그인을 어떻게 사용해야 하는지 vite가 각 옵션 마다 우선순위를 어떻게 가져가는지 알게 되었습니다