[JavaScript] Babel이란 무엇인가

🔍 Babel이란

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

바벨 공식 사이트에서 "Babel is JavaScript compiler"라고 소개한다.

바벨은 같은 언어를 다른 실행 환경에서도 돌아갈 수 있도록 형태만 바꾸는 작업을 진행하는 트랜스 파일러이다.

// ES6 화살표 함수와 ES7 지수 연산자
[1,2,3].map(n => n ** n);

IE와 다른 구형 브라우저에서는 이 두 가지 기능을 지원하지 않을 수 있다. Babel을 사용하면 위 코드를 아래와 같이 ES5 이하의 버전으로 변환할 수 있다.

"use strict";

[1,2,3].map(function (n) {
return Math.pow(n, n);
});

이처럼 Babel은 최신 사양의 자바스크립트 코드를 IE나 구형 브라우저에서도 동작하는 ES5 이하의 코드로 트랜스파일링 할 수 있다.

 

[바벨의 빌드 3단계]

1. 파싱(Parsing) : 코드를 읽고 추상 구문 트리(AST)로 변환하는 단계
2. 변환(Transforming) : 추상 구문 트리를 변경
3. 출력(Printing) : 변경된 결과물을 출력

여기서 바벨은 파싱과 출력을 담당하고, 플러그인이 변환을 진행한다.
바벨 플러그인은 바벨이 어떤 코드를 어떻게 변환할지에 대한 규칙을 나타낸다. 

 

🔍  Babel 사용하기

📍 바벨 설치

프로젝트에서 `@babel/core`와 `@babel/cli` 패키지를 개발 의존성(devDependencies)로 설치한다. 개발 의존성으로 설치하는 이유는 바벨이 애플리케이션으로 실행될 떄 필요한 것이 아니라 빌드할 때만 필요하기 때문이다.

• @babel/core : 바벨을 사용하는데 필요한 패키지
• @babel/cli : 터미널에서 커맨드를 입력해서 바벨을 사용하기 위해 필요한 패키지
  

 

yarn add -D @babel/core @babel/cli
babel <파일명/디렉토리명>

📍 .babelrc 설정 파일 작성

바벨에서 플러그인이나 프리셋을 통해 문법 변환 규칙을 알려줄 수 있다.
플러그인은 규칙 하나하나를 세밀하게 적용할 때 사용하고, 프리셋은 이런 규칙들을 모아놓은 세트로, 주로 한 번에 적용할 때 사용한다. Babel이 제공하는 공식 프리셋은 아래와 같다.

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

프로젝트 지원 환경은 Browserslist 형식으로 .browserslistrc 파일에 상세히 설정할 수 있다. 프로젝트 지원 환경 설정 작업을 생략하면 기본값으로 설정된다.

이번 포스팅에서는 기본 설정인 preset-env로 진행하겠다.

# env preset 설치 
yarn add -D @babel/preset-env

설치가 완료되면 프로젝트 루트에 .babelrc 파일을 생성하고 아래와 같이 작성한다. 지금 설치한 @babel/preset-env를 사용하겠다는 의미이다.

📍 타겟 브라우저 세팅

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

target 옵션에 브라우저 버전명만 지정하면 env 프리셋은 이에 맞는 플러그인들을 찾아 최적의 코드를 출력해낸다.

 

🔍 Polyfill

폴리필은 최신 ECMAScript 환경을 만들기 위해 코드가 실행되는 환경에 존재하지 않는 빌트인, 메소드 등을 추가하는 역할을 한다.

ES6에서 비동기 처리를 위해 등장한 Promise 객체는 env 프리셋을 가지고 변환을 하려고 해도 ie에서 인식하지 못한다. 바벨의 경우는 ES6+를 ES5로 변환할 수 있는 것들만 변환을 하는데, Promise와 같이 ES5에서 변환할 수 있는 대상이 없는 경우는 에러가 발생한다. 이러한 경우, 폴리필을 통해서 해당 이슈를 해결할 수 있다. Promise를 ES5로 변환할 수는 없지만 ES5 방식으로 구현하여 해결하는 것이다.

env 프리셋은 폴리필을 지정할 수 있는 옵션을 제공한다.

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

useBuiltIns는 어떤 방식으로 폴리필을 사용할지 설정하는 옵션이다. "usage", "entry", false 세 가지 값을 사용하는데 기본값이 false이면 폴리필이 동작하지 않는다. 반면 usage나 entry를 설정하면 폴리필 패키지 중 core-js를 모듈로 가져온다. 

폴리필 사용 설정을 했다면 core-js도 설치해야 한다. 웹팩은 바벨 로더가 만든 아래 코드를 만나면 core-js를 찾을 것이기 때문이다.

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

🔍 웹팩과 함께 쓰기

실무 환경에서는 바벨을 직접 사용하는 것보다는 웹팩으로 통합해서 사용하는 것이 일반적이다. 주로 babel-loader와 같은 로더 형태로 제공한다.

yarn add -D babel-loader

 

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

.js 확장자로 끝나는 파일은 babel-loader가 처리하도록 설정했다. 사용하는 써드파티 라이브러리가 많을수록 바벨 로더가 느리게 동작할 수 있는데 exclude 속성을 통해 node_modules 폴더를 로더가 처리하지 않도록 예외 처리를 할 수 있다.

 

📝 정리

✅ 바벨은 일관적인 방식으로 코딩하면서 다양한 브라우저에서 돌아가는 어플리케이션을 만들기 위한 도구이다.
✅ 바벨의 코어는 파싱과 출력만 담당하고 변환 작업은 플러그인이 처리한다.
✅ 여러 개의 플러그인들을 모아놓은 세트를 프리셋이라 하는데, ECMAScript+ 환경은 env 프리셋을 사용한다.
✅ 바벨이 변환하지 못하는 코드는 폴리필이라 부르는 코드 조각을 불러와 결과물에 로딩해서 해결한다.
✅ babel-loader로 웹팩과 함께 사용하면 훨씬 단순하고 자동화된 프론트엔드 개발환경을 갖출 수 있다.