49장 Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축

2023년 5월 17일 900p~917p

크롬, 사파리, 파이어폭스, 엣지 같은 에버그린 브라우저의 ES6 지원율은 약 98%로 거의 대부분 ES6 사양을 지원한다. 하지만 IE 11의 지원율은 11%다. 그리고 매년 새롭게 도입되는 버전은 브라우저에 따라 지원율이 제각각이다.

따라서 최신 ECMAScript 사양을 사용하여 프로젝트를 진행하려면 IE를 포함한 구형 브라우저에서 문제 없이 동작시키기 위한 개발 환경 구축이 필요하다.

트랜스파일러인 Babel과 모듈 번들러인 Webpack에 대해 알아보자.

 

49.1 Babel

Babel은 자바스크립트 컴파일러이다. Babel은 현재 및 이전 브라우저 또는 환경에서 ECMAScript 2015+(이상)의 코드를 이전 버전의 JavaScript로 변환하는 데 주로 사용되는 도구이다.

다음 예제에서는 ES6 화살표 함수와 ES7의 지수 연산자를 사용하고 있다.

[1, 2, 3].map(n => n ** n);

IE 같은 구형 브라우저에서는 ES6의 화살표 함수와 ES7의 지수 연산자를 지원하지 않을 수 있다. Babel을 사용하면 위 코드를 ES5 사양으로 변환할 수 있다.

"use strict";

[1, 2, 3].map(function (n) {
  return Math.pow(n, n);
});

이처럼 Babel은 최신 사양의 소스코드를 IE 같은 구형 브라우저에서도 동작하는 ES5 사양의 소스코드로 변환(트랜스파일링)할 수 있다.

 

49.2 Webpack

Webpack은 의존 관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 하나(또는 여러 개)의 파일로 번들링하는 정적 모듈 번들러다. Webpack을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더가 필요 없다. 그리고 여러 개의 자바스크립트 파일을 하나로 번들링하므로 HTML 파일에서 script 태그로 여러 개의 자바스크립트 파일을 로드해야 하는 번거로움도 사라진다.

49.2.4 babel-polyfill

Babel을 사용하여 트랜스파일링해도 브라우저가 지원하지 않는 코드가 남아 있을 수 있다. 예를 들어, ES6에서 추가된 Promise, Object.assign, Array.from 등은 ES5 사양으로 트랜스파일링해도 ES5 사양에 대체할 기능이 없기 때문에 트랜스파일링되지 못하고 그대로 남는다. 이때는 @babel/polyfill을 설치해야 한다.

npm install @babel/polyfill