Babel 기초 개념 정리

인프런 프론트엔드 개발환경의 이해와 실습 강의(Babel)를 듣고 정리해봤다.

역할

ES6+ 버전 이상의 자바스크립트나 JSX, 타입스크립트 코드를 하위 버전의 자바스크립트 코드로 변환시켜 IE나 다른 브라우저에서 동작할 수 있도록 트랜스파일 한다.

동작

1. 파싱 : 코드 -> AST(추상 구문 트리)
2. 변환 : 실제로 코드를 변경
3. 출력

바벨은 파싱과 출력을 담당한다. 변환 작업은 플러그인을 활용해 처리한다.

플러그인

코드를 변환하는 작업을 한다.

자주 사용하는 플러그인

• plugin-transform-block-scoping : let,const -> var
• plugin-transform-arrow-functions : 화살표 함수 -> function
• plugin-transform-strict-mode : use strcit

프리셋

여러가지 플러그인을 세트로 모아놓은 것

• preset-env : ECMAScript2015+를 변환
• preset-flow
• preset-react
• preset-typescript

preset-env

타겟 브라우저 설정

// babel.config.js
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          chrome: "79", // 크롬 79까지 지원하는 코드를 만든다
        },
      },
    ],
  ],
}

폴리필

// babel.config.js:
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        useBuiltIns: "usage", // 폴리필 사용 방식 지정
        corejs: {
          // 폴리필 버전 지정
          version: 3,
        },
      },
    ],
  ],
}

웹팩과 통합하기

웹팩설정에 babel-loader를 사용한다.

// webpack.config.js:
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader", // 바벨 로더를 추가한다
      },
    ],
  },
}

정리

바벨 config 설정은 babel.config.js에서 한다.
보통 플러그인들의 모음인 프리셋들을 사용해 설정을 해준다.
preset-env는 타겟 브라우져 설정, polyfill 설정이 가능하다.
babel이 변환하지 못하는 코드는 폴리필을 활용해 처리한다.
webpack에 babel-loader를 추가함으로써 웹팩과 통합할 수 있다.