Kakao FE: Developing WebTalk Without Global Scope Pollution Using Babel 7 and core-js 3

The Kakao FE Platform Team introduced a configuration using Babel 7 and core-js 3 to prevent global scope pollution during the development of the WebTalk service embedded in customer sites. The previous approach directly injected @babel/polyfill or core-js/stable into the global scope, causing name collisions and errors. The new configuration uses the @babel/plugin-transform-runtime plugin with the corejs: 3 option to utilize the core-js-pure version, which does not touch the global scope.

In this process, the useBuiltIns option of @babel/preset-env was removed, and target browsers (such as IE11) were explicitly specified using the target option. The Webpack babel-loader configuration was also modified to ensure that npm modules using ES6 syntax receive polyfills. Additionally, a Project-wide configuration approach was adopted, using babel.config.json or explicitly specifying it via the configFile option to apply Babel settings to the entire project. Finally, @babel/plugin-transform-modules-commonjs was added to resolve compatibility (interop) issues between CommonJS and ES Modules, completing the final configuration.