[JavaScript DeepDive] 49장_Babel과 Webpack

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

크롬, 사파리, 파이어폭스, 엣지 같은 에버그린 브라우저의 ES6 지원율은 약 98%로 거의 대부분

ES6 사양을 지원한다. 하지만 IE 11의 지원율은 11%다. 그리고 매년 새롭게 도입되는 버전은

브라우저에 따라 지원율이 제각각이다.

 

따라서 최신 ECMAScript 사양을 사용하여 프로젝트를 진행하려면 IE를 포함한 구형 브라우저에서

문제 없이 동작시키기 위한 개발 환경 구축이 필요하다.

 

✍ 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 사양의 소스코드로

변환(트랜스파일링)할 수 있다.

 

✍ Webpack

webpack은 모던 JavaScript 애플리케이션을 위한 정적 모듈 번들러 입니다. webpack이 애플리케이션을 처리할 때, 내부적으로는 프로젝트에 필요한 모든 모듈을 매핑하고 하나 이상의 번들을 생성하는 디펜던시 그래프를 만듭니다.

 

Webpack은 의존 관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 하나(또는 여러 개)의 파일로

번들링하는 모듈 번들러다. Webpack을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈

로더가 필요 없다. 그리고 여러 개의 자바스크립트 파일을 하나로 번들링하므로 HTML 파일에서 script 태그로 여러 개의 자바스크립트 파일을 로드해야 하는 번거로움도 사라진다.

 

👨‍💻 이번 장에서는 Babel, Webpack에 대한 간략한 소개와 환경 설정법을 다뤘다. 환경 설정하는 법은 정리하지 않았지만, 읽는 과정에서 많은 npm 설치와 파일 설정이 까다롭다는 것을 알 수 있었다. 지금까지는 간단한 설치 명령어를 통해 Babel, Webpack을 직접 커스터마이징 한 적은 없지만, 실무에서는 직접 서비스에 맞게 적용할 줄 알아야 될 것 같다.

 

+ 49장 책 페이로 따지면 대략 950장 정도 되는 내용을 언제 읽나 싶었지만, 두 달가량의 기간 동안 한 번 정독과 정리를 끝낼 수 있었다. 생각보다 긴 기간 동안 한 번 정독을 했지만, 많이 유익했고 좋았다. 앞으로 정리한 개념을 바탕으로 다시 한번 복습해야겠다.