바벨(Babel) 설정하기

바벨(Babel)을 왜 사용할까?

• 바벨은  트랜스파일러로 최신 자바스크립트(타입스크립트, JSX 포함)가 모든 브라우저에서 동작하도록 변환해 줍니다.
• 실행이 안되는 구버전 웹브라우저를 대응하기 위해 배포할 때에 예전 방식의 자바스크립트로 변환해서 배포하려고 사용합니다.

바벨 빌드 과정

1. 파싱(Parsing): 코드를 분해하는 과정
2. 변환(Transforming): ES6 -> ES5 변환하는 과정
3. 출력(Printing): 변경된 결과물을 출력하는 과정

플러그인

바벨 플러그인은 바벨이 어떤 코드를 어떻게 변환할 지에 대한 규칙을 나타냅니다. 

필요한 경우 플러그인을 직접 만든 커스텀 플러그인을 사용하거나 잘 만들어진 플러그인을 가져다 사용합니다.

ex) .babelrc

{
  "plugins": ["transform-decorators-legacy", "transform-class-properties"]
}

프리셋

필요한 플러그인을 일일이 설정하기 번거로운데 여러 가지 플러그인을 세트로 모아 놓은 것을 프리셋이라고 합니다.

바벨이 제공하는 대표적인 프리셋 

• @babel/preset-env
  • preset-env는 ES5를 변환할 때 사용합니다. 
• @babel/preset-react
• @babel/preset-typescript
• @babel/preset-flow
  • preset-flow, preset-react, preset-typescript는 flow, 리액트, 타입스크립트를 변환하기 위한 프리셋입니다.

아래 소스와 같이 타깃 브라우저를 설정할 수 있습니다.

ex) .babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "72"
        }
      }
    ]
  ]
}

폴리필

폴리필은 구형 브라우저에서는 지원하지 않는 기능(Promise 같은 객체들은 ES5에 존재하지 않는 기능)을 제공합니다. 

런타임에 등록되지 않은 메서드나 기능을 폴리필을 추가해서 해결해야 합니다.

예를 들어 Object.FromEntries를 caniuse에서 확인해 보면 chrome 72 버전에서는 지원이 되지 않습니다.

chrome 73 버전 이상부터는 문제가 되지 않지만 chrome 72 버전에서는 Object.FromEnties는 function이 아니라는 에러 문구와 함께 애플리케이션은 제대로 작동하지 않을 것입니다. 이와 같은 경우 폴리필을 추가하여 이슈를 해결할 수 있습니다.

useBuiltIns 옵션

• usage
  • 실제 필요한 폴리필을 자동으로 추가해 줍니다.
• entry
  • 타깃 환경에 필요한 특정 모듈만 가져오기로 바꿉니다.

참고

ex) .babelrc

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": {
          "chrome": "72" // 모바일웹 안드로이드 디바이스 지원(갤럭시 S8(v.8))
        },
        "useBuiltIns": "usage", // 폴리필 사용 방식 (entry)
        "corejs": 3, // 폴리필 버전
        "shippedProposals": true
      }
    ]
  ]
}

import 'core-js/stable';
import 'regenerator-runtime/runtime';

참고