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

  • 하지만 IE 11의 ES6 지원율은 약 11%다.
  • 그리고 매년 새롭게 도입되는 ES6 이상의 버전과 제안 단계에 있는 ES 제안 사양은 브라우저에 따라 지원율이 제각각이다.

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

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

• Babel은 트랜스파일러, Webpack은 모듈 번들러이다.

• Webpack을 통해 Babel을 로드하여 ES6+와 ES.NEXT 사양의 소스코드를 구형 브라우저에서도 동작하도록 ES5 사양의 소스코드로 트랜스파일링 할 수 있다.

---

49.1 Babel

• 아래처럼 ES6의 화살표 함수와 ES7의 지수 연산자를 사용할 때 구형 브라우저에서는 지원하지 않을 수 있으므로 Babel을 사용해 아래 코드를 ES5 사양으로 변환할 수 있다.

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

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

49.1.1 Babel 설치

# package.json 생성
npm init -y
# babel/core, babel/cli 설치
npm install --save-dev @babel/core @babel/cli

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

Babel을 사용하려면 @babel/preset-env를 설치해야 한다.

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

@babel/preset-env 설치

npm install --save-dev @babel/preset-env 

babel.config.json

{
	"presets": ["@babel/preset-env"]
}

49.1.3 트랜스파일링

• Babel을 사용하여 ES6+/ES.NEXT 사양의 소스코드를 ES5 사양의 소스코드로 트랜스파일링할 수 있다.

49.1.4 Babel 플러그인 설치

npm install --save-dev @babel/plugin-proposal-class-properties

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

• 브라우저에서는 CommonJS 방식의 require 함수를 지원하지 않으므로 트랜스파일링된 결과를 그대로 브라우저에서 실행하면 에러가 발생한다.

---

49.2 Webpack

• Webpack은 의존 관계에 있는 자바스크립트, CSS, 이미지 등의 리소스들을 하나의 파일로 번들링하는 모듈 번들러다.

• Webpack을 사용하면 의존 모듈이 하나의 파일로 번들링되므로 별도의 모듈 로더가 필요없다.

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

49.2.1 Webpack 설치

npm install --save-dev webpack webpack-cli

49.2.2 babel-loader 설치

npm install --save-dev babel-loader

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

• webpack.config.js는 Webpack이 실행될 때 참조하는 설정 파일이다.

49.2.4 babel-polyfill 설치

• babel을 사용해 소스코드를 트랜스파일링해도 브라우저가 지원하지 않는 코드가 남아 있을 수 있다.
• Promise, Object.assign 등과 같이 ES5 사양으로 대체할 수 없는 기능은 트랜스파일링되지 않는다.
• 따라서 구형 브라우저에서도 Promise, Object.assign 등과 같은 객체나 메서드를 사용하기 위해서는 @babel-polyfill을 설치해야 한다.

npm install @babel-polyfill