[Setting] Babel - JavaScript ES6+ Compiler

Babel은 JavaScript ES6+ 버전을 ES5 버전에서도 사용 가능하도록 소스를 변환해주는 컴파일러입니다.

현재 최신버전의 JavaScript 문법은 모든 브라우저가 이해하지는 못하기 때문에, 대부분의 브라우저가 이해할 수 있는 문법으로 변환해주어야합니다.

따라서 Babel을 사용하는 경우에는 보다 편리한 최신문법을 사용하여 코드를 작성할 수 있게 되기 때문에 일을 효율을 높일 수 있습니다.

 

 

Babel 설치하기

# npm install --save-dev @babel/core @babel/cli

 

 

Babel 플러그인 설치하기

플러그인은 코드를 변환하기 위해 사용됩니다. 작성한 코드의 형태에 맞게 플러그인을 설치하여 컴파일에 사용할 수 있습니다.

@babel/plugin-proposal-class-properties : 정적 클래스와 초기화 문법을 컴파일

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

 

 

Babel 프리셋과 polyfill 설치하기

프리셋이란 여러개의 플러그인으로 이루어져있습니다. Babel의 플러그인을 사용하기가 어렵다면 환경에 맞게 플러그인을 묶어놓은 프리셋이 있습니다.

직접 프리셋을 생성하는 방법도 있지만, 여기서는 만들어져있는 프리셋을 사용하겠습니다.

@babel/preset-env : 환경에 따라서 코드를 변경하지 않아도 JavaScript 최신버전을 사용할 수 있습니다.

@babel/polyfill : Promise, Map, Set 객체를 하위버전에서도 사용가능한 객체로 바꾸어줍니다. (추가기능)

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

 

 

Babel 환경설정 파일 만들기

.babelrc 라는 이름으로 파일을 하나 생성합니다.

presets 에는 사용할 프리셋을 모두 입력하고, plugins 에는 사용할 플러그인을 모두 입력합니다.

{
    "presets": ["@babel/preset-env"],
    "plugins": ["@babel/plugin-proposal-class-properties"]
}

 

 

컴파일 하기

--watch 옵션은 script.js 파일이 수정될 때마다 자동으로 컴파일을 해주는 기능입니다. 한번만 실행하는 경우에는 --watch 옵션을 쓰지 않고 컴파일을 하면 됩니다.

만약 폴더를 통째로 컴파일 하여 하나의 파일로 만들고 싶은 경우에는 script.js 대신 src 와 같은 폴더명을 넣어주시면 됩니다.

한번만 컴파일

# npx babel script.js --out-file script-compiled.js

 

파일의 변경에 따른 지속적인 컴파일

# npx babel script.js --watch --out-file script-compiled.js

 

 

프로젝트 구조

ROOT

  - node_modules (Node js 프로젝트 생성시 자동으로 생성)

  - package-lock.json (Node js 프로젝트 생성시 자동으로 생성)

  - package.json (Node js 프로젝트 생성시 자동으로 생성)

  - .babelrc

  - script.js

  - script-compiled.js