[Babel] 바벨?

리액트를 활용하여 프로젝트 빌드를 하고나면 웹팩과 바벨이 자동으로 설정됩니다.
이전 포스팅을 통해 웹팩에 대해 살펴보았으므로 이번에는 바벨에 대해 알아보겠습니다.
대충 자바스크립트 컴파일러로 이해하고 넘어갔었는데 왜 필요한 지, 어떻게 사용하는지 등에 대해 작성하겠습니다.

바벨

바벨은 자바스크립트 컴파일러입니다.

ES6+ 문법이 등장한 시점에 브라우저는 이 문법을 이해하지 못했습니다.

따라서 이런 크로스 브라우징 문제를 해결하기 위해 생겨난 도구로써 ES6+버전의 자바스크립트, 타입스크립트, JSX 등 다양한 언어를 모든 브라우저에서 호환될 수 있도록 도와줍니다.

 

바벨의 동작 원리

파싱(Parsing)

바벨은 소스 코드를 분석하여 추상구문트리/AST(Abstract Syntax Tree)로 변환합니다.

변환(Transforming)

파싱 단계에서 생성된 AST를 브라우저와 호환되는 AST로 변경합니다.

출력(Printing)

변환 단계에서 변경된 AST를 바탕으로 새로운 코드(결과물)를 생성합니다.

 

플러그인

바벨의 동작, 즉 변환 과정에 대한 규칙을 플러그인을 통해 정할 수 있습니다.

플러그인은 코드를 어떻게 변환할지에 대한 규칙을 정의하며, 직접 만들어 쓸 수도 있습니다. 그리고 플러그인들을 목적에 따라 묶어놓은 세트를 프리셋(preset)이라고 합니다.

https://babeljs.io/docs/presets

Presets · Babel

 

폴리필(Polyfill)

바벨은 ES2015 +를 ES5 버전으로 변환할 수 있는 것만 빌드합니다.

문법만 변환해주기 때문에 Promise 객체나 Map, Array.from 등의 코드는 바벨로 변환이 불가능합니다.

따라서 폴리필이라는 코드 조각을 추가하여 이를 해결합니다.

 

폴리필은 @babel/polyfill 모듈을 사용하거나 core-js에서 직접 import하여 사용할 수 있으며,

폴리필을 제공하는 env프리셋(@babel/preset-env)을 활용할 수도 있습니다.

// babel.config.js:
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        useBuiltIns: "usage",
        corejs: {
          version: 2,
        },
      },
    ],
  ],
}

• useBuiltIns : 폴리필 사용 방식 설정
  • usage는 모든 코드를 검사한 뒤 필요한 폴리필을 포함시킵니다.
• version : 폴리필 버전 설정

 

웹팩에서 사용하기

바벨은 로더 형태로 제공되어서 웹팩에서 활용할 수 있습니다.

babel-loader 패키지를 설치한 뒤 웹팩에 추가합니다.

npm install -D babel-loader

// webpack.config.js:
module.exports = {
  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        loader: "babel-loader",
      },
    ],
  },
}

exclude 옵션으로 node_modules을 제외하여야 바벨 속도 저하를 방지할 수 있습니다.

require("core-js/modules/es6.promise")

폴리필을 사용하려한다면 필요한 core-js 를 설치해야 합니다.