카카오 FE, Babel 7과 core-js 3로 전역 스코프 오염 없는 웹톡 개발기

카카오 FE 플랫폼팀은 고객 사이트에 삽입되는 웹톡 서비스 개발 과정에서 전역 스코프 오염을 방지하기 위해 Babel 7과 core-js 3를 적용한 설정을 소개했다. 기존 방식은 @babel/polyfill이나 core-js/stable을 전역에 직접 삽입하여 이름 충돌과 에러를 유발했으나, 새로운 설정은 @babel/plugin-transform-runtime 플러그인과 corejs: 3 옵션을 통해 전역 스코프를 건드리지 않는 core-js-pure 버전을 사용한다.

이 과정에서 @babel/preset-env의 useBuiltIns 옵션을 제거하고 target 옵션으로 타깃 브라우저(IE11 등)를 명시했으며, ES6 문법을 사용하는 npm 모듈들도 폴리필을 적용받도록 Webpack의 babel-loader 설정을 수정했다. 또한, 프로젝트 전체에 바벨 설정을 적용하기 위해 babel.config.json을 사용하거나 configFile 옵션으로 명시적으로 지정하는 Project-wide configuration 방식을 채택했다. 마지막으로 CommonJS와 ES Module 간 호환성(interop) 문제를 해결하기 위해 @babel/plugin-transform-modules-commonjs를 추가하여 최종 설정을 완성했다.