What is Babel?

최근에 나온 build tool을 사용하면 Babel을 설정할 필요가 없고 필요한 옵션이 있을 경우에만 따로 명시하면 되다 보니 Babel을 직접 만지는 일이 거의 없어졌습니다. 리프레시 겸 Babel과 Webpack을 직접 설정해 보며 Babel에 관한 내용을 정리하려고 합니다.

 

Babel?

Babel은 ECMAScript 2015+(ES6+)의 문법을 웹 브라우저가 처리할 수 있는 이전 버전으로 변환하는 JavaScript 트랜스컴파일러(Transcompiler)입니다. Babel은 Babel 만으로 동작하는 것이 아니라 Babel의 plugin이 동작하여 트랜스컴파일이 되는 것입니다.

Babel을 통해 JavaScript 최신 문법과 기능을 사용할 수 있습니다.

 

Presets & Plugins 

Babel에서는 주요 plugin들을 모아 preset을 만들어 제공합니다. 비공식 preset도 존재하며 직접 만들어서 사용할 수도 있습니다.

Babel에서 지원하는 공식 Presets은 다음과 같습니다.

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

 

이전에 정적 타입 체킹을 위해 flow을 쓰면서 @babel/preset-flow을 사용하다 typescript로 package를 구성하면서 @babel/preset-typescript을 사용하게 되었는데 이처럼 본인의 개발 환경에 맞게 Presets를 구성합니다. Babel에서 쓰이는 웬만한 플러그인들은 @babel/preset-env에 들어가 있습니다. 하지만 추가로 필요한 플러그인이 있을 경우 설치 후 config file에 등록하면 됩니다.

 

Config Files

babel.config.* vs .babelrc.*

Babel에서는 두 가지의 config file 포맷이 존재하며 해당 포맷은 같이 쓰일 수도 있고 독립적으로도 사용 가능합니다. 각 포맷이 쓰이는 용도에 대해서 알아보겠습니다.

babel.config.* 해당 포맷은 Project-wide configuration으로 프로젝트 전체 설정에 사용됩니다. 여러 패키지로 구성된 프로젝트의 경우 루트 디렉토리에 해당 포맷을 사용하여 프로젝트 전체의 Babel config를 설정합니다.

.babelrc.* 해당 포맷은 File-relative configuration으로 특정 파일이나 디렉토리에서 지역적으로 Babel 설정을 할 때 사용됩니다. 컴파일 될 때 filename을 따라 디렉토리 구조를 검색하여 .babelrc.* 포맷을 가지는 파일을 로드 합니다. package.json에서 babel key를 사용 시 지역적으로 설정이 가능합니다.

 

json vs js

config file의 확장자에 대해 알아보겠습니다. js의 경우 Babel 구성 api 객체가 노출되고, 컴파일 될 때마다 config 함수를 실행하게 되어 비효율적입니다. 그럴 경우 api.cache(true)를 사용해 cash 설정을 하여 config 함수를 한 번만 호출하도록 설정할 수 있습니다. 따라서 api 노출 유무나 캐싱 설정에 따라 js와 json을 선택하여 사용하면 됩니다.

 

Config File 작성

예시로 config file을 작성해 보겠습니다.

// babel.config.json
{
  // 사용할 preset 등록
  "presets": [
    // 특정 preset에 추가로 config 설정하는 case
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": 100
        }
      }
    ],
    "@babel/preset-react",
    "@babel/preset-typescript"
  ],
  // 사용할 plugin 등록
  "plugins": [
    "@babel/plugin-transform-runtime"
  ]
  // 추가로 설정 option 참고
  // https://babeljs.io/docs/options
}

예시로 작성해둔 config file 기본적인 형태로 실제 프로젝트에 도입 시 필요한 option을 추가해서 사용하면 됩니다.

 

마무리

build tool의 발전으로 직접 Babel을 설정할 일이 줄었지만 Babel을 통해 어떻게 JavaScript가 트랜스컴파일되는지 알아두는 것은 중요합니다. Babel의 공식 문서에 정리도 잘 되어있고 Babel을 직접 적용하는 것이 어렵지 않기 때문에 한 번씩 Babel을 설정하는 것도 좋을 것 같습니다.

 

---

참고자료

https://babeljs.io/docs/

https://stackoverflow.com/questions/60288375/when-to-use-babel-config-js-and-babelrc