Babel

jjuya·2020년 2월 28일

Babel

JS Transpiler

Babel은 ES6 이상의 최신 문법을 ES5 이하의 문법으로 작성한 것 처럼 소스코드 내의 문법 형태를 변경해주는 JS transpiler. JS compiler라고 부르기도 한다.
Babel을 사용해 문법 형태가 변경된 소스 코드는 최신 문법을 지원하는 실행 환경 뿐만 아니라 아직 최신 문법들이 적용되지 않은 실행 환경에서도 작동한다.

compile은 인간이 작성한 소스 코드를 컴퓨터가 이해할 수 있도록 머신 코드로 바꿔주는 과정을 뜻한다.
transfile은 다른 실행 환경에서도 돌아갈 수 있도록 같은 언어를 유지한체 소스 코드의 형태만 바꾸는 과정을 뜻한다.
JS는 인터프리터 언어이기 때문에 컴파일 과정이 필요 없지만 JS 커뮤니티에서는 이 두 용어가 혼용되어 사용되고 있다.

기능

구문 변환
Polifill 지원 (@babel/polifill)
소스 코드 변환
+a

예시

// Babel Input: ES2015 arrow function
[1, 2, 3].map((n) => n + 1)

// Babel Output: ES5 equivalent
[1, 2, 3].map(function(n) {
  return n + 1;
})

사용해보자!

@babel/core, @babel/cli

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

# yarn
$ yarn add -D @babel/core @babel/cli

@babel/core,@babel/cli를 devDependencies에 추가한다. 그 이유는 Babel은 빌드 시에 필요하기 때문이다.

@babel/core는 항상 필요로 하는 패키지이며 transform에 필요한 도구이다.
@babel/cli는 터미널에서 cammand line을 통해서 transpile 할 수 있는 도구이다.

plugin / preset

Babel은 plugin과 preset을 통해 코드를 어떻게 변환할지 판단하고 동작한다. plugin은 규칙 하나하나 미세하게 적용할 때 사용한다. preset은 plugin의 배열으로 여러 개의 규칙을 한번에 적용한다.

이는 Babel의 설정 파일인 babel.config.js 혹은 .babelrc에 입력해준다.

Babel command를 실행할 때마다 매번 옵션을 붙이기 번거로워 Babel 설정 파일을 이용한다. 설정 파일은 root에 추가하여 사용한다.

ex) babel.config.js

module.exports = fuction(api) {
  api.cache(true)
  
  const presets = ['next/babel']

  const plugins = [
    [
      '@babel/plugin-proposal-decorators',
      {
        legacy: true,
      },
    ],
    [
      '@babel/plugin-proposal-class-properties',
      {
        loose: true,
      },
    ],
  ]
  
  return { presets, plugins }
}