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

크롬, 사파리, 파이어폭스, 엣지와 같은 에버그린 브라우저의 ES6 지원율은

약 98%로 거의 대부분의 ES6 사양을 지원한다.

 

하지만 IE 11의 ES6 지원율은 약 11%다.

구형 브라우저에서 문제 없이 동작시키기 위한 개발 환경을 구축하는 것이 필요하다.

 

대부분의 프로젝트가 모듈을 사용하므로 모듈 로더도 필요하다.

ES6 모듈(ESM)은 대부분의 모던 브라우저에서 사용할 수 있다.

 

하지만 다음과 같은 이유로 아직까지는 ESM보다는 별도의 모듈 로더를 사용하는 것이 일반적이다.

• IE를 포함한 구형 브라우저는 ESM 지원 X
• ESM을 사용하더라도 트랜스파일링이나 번들링이 필요한 것은 변함 X
• ESM이 아직 지원하지 않는 기능(bare import 등)이 있고 점차 해결되고는 있지만
  아직 몇가지 이슈가 존재한다.

트랜스파일러인 Babel과 모듈 번들러인 Webpack을 이용하여 ES6+/ES.NEXT 개발 환경을 구축해 보자.

 

1. Babel

ES6+ / ES.NEXT로 구현된 최신 사양의 소스코드를

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

 

2. Webpack

의존 관계에 있는 JS, CSS, 이미지 등의 리소스들을 하나(또는 여러 개)의 파일로 번들링하는 모듈 번들러다.

의존 모듈이 하나의 파일로 번들링되므로

별도의 모듈 로더가 필요 없다.