요즘 프론트엔드 개발하는 사람들은 vue.js
나 react.js
를 사용할 것이다. 그러면 자연스럽게 ES6+
의 최신 문법을 사용하기 위해 babel
과 babel-polyfill
을 사용하게 된다. 나 같은 경우에는 공식 가이드에서 알려준 대로 하다 보니 babel
이 정확히 뭔지도 모른 채 최신 문법을 사용하기 위해 필요한 패키지
정도만 알고 설치하고 사용하고 있었다. 그러다 뒤늦게 babel
에 대해 자세히 알아보기 시작했다.
babel
babel은 ECMAScript 2015+ 코드를 현재 및 이전 버전의 브라우저 또는 환경에서 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 주로 사용되는 도구다. ( https://babeljs.io/docs/en/index.html)
그렇다. babel
은 ES6+
코드를 브라우저에서 해석할 수 없기 때문에 브라우저의 환경과 호환되는 JavaScript로 변환해주는 컴파일러였던 것이다. ES6
의 arrow function
이나 template strings
등 편리한 문법들을 사용하려면 이 babel
을 설치해야 된다.
그런데 나는 chrome
에서 babel
설치 없이 ES6
의 문법들을 사용했던 것으로 기억하고 있다. 그건 바로 브라우저가 ES6
의 문법을 지원하기 때문이다. “어라? 방금 babel
을 쓰는 이유는 ES6+
코드를 브라우저에서 해석할 수 없기 때문에 브라우저 환경에 맞춰 JavaScript로 변환한다고 말해놓고 이제는 브라우저가 ES6
의 문법을 지원한다고?”라고 생각할 수 있는데 브라우저 버전에 따라 지원하는 브라우저도 있고, 지원하지 않는 브라우저도 있기 때문이다.
ES6 지원 브라우저 현황을 보면 chrome
이나 firefox
같은 경우에는 거의 지원하고 있지만 ie11
같은 경우에는 거의 지원되지 않는다고 볼 수 있다. 그래서 babel
을 사용하여 여러 브라우저에서 호환될 수 있게 해야 한다. 또, 새로운 ES가 나오면 babel
을 통해 브라우저가 지원하기도 전에 가장 먼저 사용할 수 있다.
지금까지 babel
을 사용하면 최신 문법을 브라우저에서 사용할 수 있다는 것을 알 수 있었다. 그렇다면 babel-polyfill
은 뭘까?
babel-polyfill
babel-polyfill
은 ES6+
에서 새롭게 추가된 Promise
, WeakMap
와 같은 내장객체나 Array.from,
Object.assign
와 같은 정적 메소드를 구형 브라우저에서도 작동할 수 있도록 변환해주는 도구다. 쉽게 말해 ES6+
에서 새롭게 추가된 객체나 메소드들을 구형 브라우저에도 작동할 수 있도록 변환해준다는 것이다.
babel, babel-polyfill 차이점
babel
은 ES6+
의 문법을 구형 브라우저에서도 작동할 수 있도록 변환해주는 것이라면 babel-polyfill
은 ES6+
에서 새롭게 추가된 객체들을 구형 브라우저에서도 작동할 수 있도록 변환해주는 것이다.
이제는 babel
과 babel-polyfill
의 차이점을 알게 되었다. 그런데 이제는 어떤 상황에 babel-polyfill
을 포함해야 하는지 고민할 필요가 없다. babel 7.4.0
부터는 babel-polyfill
을 직접 사용하므로 이젠 따로 설치할 필요가 없어지게 되었다. (관련 링크)
마치며
babel
을 사용한 기간에 비해 늦게 babel
과 babel-polyfill
의 차이점에 대해 알게 되었다. 그리고 이제는 babel
에 기본적으로 babel-polyfill
이 포함되어 babel
이 문법적인 변환과 새롭게 추가된 객체들까지도 변환한다고 볼 수도 있게 되었다.
추가로 babel
이 ES6
를 어떻게 변환하는지 궁금하다면 여기서 직접 ES6
코드를 입력해보면 알 수 있을 것이다.