📌 babel

Babel은 자바스크립트 컴파일러로 아래의 역할을 하여 브라우저 호환 문제를 해결한다.

• 구문 변환
• 대상 환경에 누락된 폴리필 기능
• 소스 코드 변환

Polyfill이란, 구멍난 벽을 충전해주는 솜을 말한다. 프로그래밍에서는 babel이 globalThis와 같이 모든 것을 컴파일 해주지 못하므로 이 때, core-js라는 폴리필 기능을 사용한다.

컴파일러 vs 트랜스파일러

1. 컴파일러

한 언어로 작성된 코드를 다른 언어로 변환해주는 역할을 한다.

2. 트랜스파일러

한 언어로 작성된 코드를 비슷한 수준의 추상화를 가진 다른 언어로 변환해주는 역할을 한다.

위키피디아에 따르면, 컴파일러가 트랜스파일러보다 큰 범주에 속해있다고 한다.

사용

1. 별도의 build 시스템이 없기 때문에 built-in을 사용하여 패키지를 설치한다.

$npm i -D @babel/core @babel/cli @babel/preset-env

2. babel 구성파일 설정

// babel.config.js
module.exports = {
  comments: false,
  presets: [
    [
      "@babel/preset-env",
      {
        useBuiltIns: "usage",
        corejs: "3.26.0",
      },
    ],
  ],
};

useBuiltIns 옵션은 폴리필을 처리하는 방법을 구성한다. usage 옵션값을 사용하기 위해 core-js 3버전을 설치해야한다.

$npm i core-js@3

babel 구성파일에 target을 설정해줄 수 있는데, 이 때 target은 어떤 브라우저까지 호환되도록 할지 범위를 정해주는 기준이 된다.

// .browserslistrc
> 0.25% in KR
last 2 versions
node > 16
ie 9-11

target은 .browserslistrc 파일로 관리하는 것이 편리하다.

• ie 11 : 인터넷 익스플로러 11만
• last 2 versions : 최신 브라우저와 그 이전버전까지
• last 2 node versions : node 최신버전과 그 이전버전까지
• not dead : 업데이트가 종료되지 않은

자세한 정보를 아래 사이트를 참고

https://browsersl.ist/

3. package.json에 명령어 등록

// package.json
{
    "scripts": {
        ...
        "compile": "cross-var babel $npm_package_config_file_input -o $npm_package_config_file_output",
        "compile:dir": "cross-var babel $npm_package_config_folder_input -d $npm_package_config_folder_output",
        "watch:compile": "npm run compile -- --watch",
    }
}

파일을 compile 해줄 수 있고 폴더를 compile 해줄 수 있다.
watch 옵션 추가하면 파일이 변경되어 저장될 때마다 compile 자동 수행한다.

🏓 소감

babel, webpack은 자주 사용하지 않으니 제대로 알아두면 편할 것 같다. 자세한 설정들은 babel 공식문서를 참고하도록 하자.