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

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

 

49.1 Babel

 

- ES6+/ES.NEXT로 구현된 최신 사양 소스코드를 IE같은 구형 브라우저에서도 동작하는 ES5 사양의 소스코드로 변환(트랜스 파일링) 가능 

 

- npm을 사용하여 Babel 설치 

# 프로젝트 폴더 생성
mkdir esnext-project && cd esnext-project
# package.json 생성
npm init -y
# babel-core, babel-cli 설치
npm install --save-dev @babel/core@babel/cli

1) babel/core

 - babel의 핵심 기능 포함

 

2) babel/cli

 - 터미널에서 babel 명령어를 사용할 수 있게 도와줌

 

3) babel/preset -env

 - 함께 사용되어야 하는 Babel 플러그인을 모아둔 것으로 Babel 프리셋 이라고 부름

 - 필요한 플러그인들을 프로젝트 지원 환경에 맞춰 동적으로 결정

 - 공식 Babel 프리셋

• @babel / preset -env
• @babel /preset  -flow
• @babel / preset - react
• @babel /preset - typescript

# babel/preset-env 설치 
npm install --save-dev @babel/preset-env

- 설치가 완료되면 프로젝트 루트 폴더에 babel.config.json 설정 파일을 생성하고 다음과 같이 작성 

- 지금 설치한 @babel/preset-env를 사용하겠다는 의미 

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

 

49.2 Webpack

 

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

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

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

- npm을 통해 Webpack 설치 

npm install --save-dev webpack webpack-cli