모던 자바스크립트 Deep Dive - Babel과 Webpack을 이용한 ES6+/ES.NEXT 개발 환경 구축

 

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

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

Babel

• ES6의 화살표 함수, ES7의 지수 연산자

49-01

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

• IE 같은 구형 브라우저에서는 위 문법을 지원하지 않을 수 있음.
• Babel을 사용하면 위 코드를 ES5 사양으로 변환할 수 있음.

49-02

"use strict";

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

• 이처럼 Babel은 최신 사양의 소스코드를 ES5 사양의 소스코드로 변환(트랜스파일링)할 수 있음.

Webpack

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