Babel

Babel은 ECMAScript 2015+ 코드를 이전 JavaScript 엔진에서 실행할 수 있는 이전 버전과 호환되는 JavaScript 버전으로 변환하는 데 주로 사용되는 무료 오픈 소스 JavaScript 트랜스 컴파일러입니다.
출처: Babel 위키백과

ECMAScript

Babel을 쉽게 이해하기 위해서는 모두 아시다시피 ECMAScript, ES에 대해 알아야합니다. JavaScript의 표준을 ECMAScript라 부르며, 2015년 ES는 새로운 버전이 출시되었고 그것이 ES6입니다. 그리고 최신의 JavaScript 문법으로 사용하는 것들은 ES6를 포함한 ES7, ES8입니다.

Compiler

그러나 ES6 이상의 최신의 문법이 작동하지 않는 구형의 브라우저에서는 서비스가 원활히 동작하지 않습니다. 이러한 최신의 문법으로 작성한 JavaScript 코드를 Babel을 통해 이러한 브라우저들에서도 동작할 수 있는 ES5 버전으로 변환을 해줄 수 있고, 이를 '컴파일'한다고 합니다. 그리고 이러한 기능을 하는 Babel을 '컴파일러'라고 부릅니다.

Babel 설치 및 설정

1.1 패키지 설치

babel/core를 포함한 3가지 패키지를 개발 의존성 모듈로 설치해줍니다.

npm i -D @babel/core @babel/preset-env @babel/plugin-transform-runtime

1.2 package.json

package.json 파일에 browerslist 옵션을 코딩해줍니다. browerslist 옵션은 현재 NPM 프로젝트에서 지원할 브라우저의 범위를 명시하는 용도입니다.

"browserslist": [
    "> 1%",
    "last 2 versions"
  ]

이것은 현재 프로젝트에서 전 세계의 점유율이 1% 이상인 모든 브라우저의 마지막 2개 버전까지 모두 지원을 하겠다는 의미입니다.

1.3 .babelrc.js 파일 생성

.babelrc.js 마침표로 시작하는 rc(runtime configuration) 파일, 즉 구성 파일을 만들어줍니다. 마침표로 시작하는 것은 구성 옵션이나 숨김 파일을 의미합니다.

1.4 export

.babelrc.js 파일 내에 아래 내용을 코딩해줍니다.

module.exports = {
  presets: ['@babel/preset-env'],
  plugins: [
    ['@babel/plugin-transform-runtime']
  ]
}

위 작업으로 프로젝트에서 작성하는 모든 JavaScript는 Babel을 통해 ES5 버전으로 변환되어 브라우저에서 동작하게 됩니다.

1.5 개발 서버 오픈

개발 서버를 열어서 패키지가 잘 설치되었는지 확인해줍니다. 확인을 위한 간단한 방법으로 main.js 파일에 아래와 같이 비동기 함수를 작성합니다.

async function test() {
  const promise = Promise.reseolve(123)
  console.log(await promise)
}
test()

Babel이 정상적으로 작동했다면, 아래 그림과 같이 콘솔창에 123이 출력된 것을 볼 수 있습니다.