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

매년 새롭게 도입되는 ES6 이상의 버전과 제안 단계에 있는 ES 제안 사양(ES.NEXT)은 브라우저에 따라 지원율이 제각각이다. 따라서 최신 ECMAScript 사양을 사용하여 프로젝트를 진행하려면 구형 브라우저에서 문제 없이 동작시키기 위한 개발 환경을 구축하는 것이 필요하다.

또한 모듈 로더도 필요하다.

트랜스 파일러인 Babel과 모듈 번들러인 Webpack을 공부하자 !

49.1 Babel

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

*) P.902 - P.909 책의 예시를 보면 이해됨

49.1.1 Babel 설치

49.1.2 Babel 프리셋 설치와 babel.config.json 설정 파일 작성

Babel을 사용하려면 @babel/preset-env를 설치해야 한다. @babel/preset-env는 함께 사용되어야 하는 Babel 플러그인을 모아 둔 것으로 Babel 프리셋이라고 부른다.

49.1.3 트랜스파일링

49.1.4 Babel 플러그인 설치

49.1.5 브라우저에서 모듈 로딩 테스트

49.2 Webpack

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

*) P.910 - P.917 책의 과정을 보면 이해됨

49.2.1 Webpack 설치

49.2.2 babel-loader 설치

49.2.3 webpack.config.js 설정 파일 작성

49.2.4 babel-polyfill 설치

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