[JavaScript] 바벨과 폴리필의 개념 + 적용까지

Babel(바벨)이란?

Babel은 널리 사용되는 자바스크립트 트랜스파일러로 최신 ES6+ 자바스크립트 코드를 ES5 이하로 변환하여 구형 브라우저에서도 최신 기능을 활용할 수 있도록 해준다. Babel은 플러그인과 프리셋(preset) 설정을 통해 유연하게 구성할 수 있으며 다양한 자바스크립트 기능을 지원한다.

 

Babel의 주요 기능

• 문법 변환: 화살표 함수, 클래스, 템플릿 리터럴 등 ES6+ 문법을 ES5 이하로 변환
• 폴리필 지원: 특정 기능을 구형 브라우저에서도 사용할 수 있도록 폴리필 추가
• 모듈 시스템 변환: ES6 모듈을 CommonJS 또는 AMD와 같은 다른 모듈 시스템으로 변환
• 플러그인 및 프리셋 관리: 필요한 기능에 맞춰 플러그인이나 프리셋을 추가하여 변환을 최적화

 

Babel 의 예시

// 변환 전: 최신 자바스크립트 문법 사용
const greet = (name) => `Hello, ${name}!`;

export default greet;


// 변환 후: ES5 이하의 자바스크립트로 변환됨
var greet = function greet(name) {
  return "Hello, " + name + "!";
};

module.exports = greet;

 

 

Polyfill(폴리필)이란?

Babel은 최신 자바스크립트 문법을 변환하는 데 매우 효과적이지만 브라우저나 실행 환경에 존재하지 않는 내장 기능이나 API는 변환하지 못한다. 예를 들어 Array.prototype.includes나 Promise, fetch 같은 최신 기능은 구형 브라우저에서 제공하지 않기 때문에 이러한 기능은 Babel로는 해결할 수 없다. 이때 필요한 것이 폴리필(polyfill)이다.

 

Polyfill의 예시

// 변환 전: 최신 기능을 사용한 코드
const hasValue = [1, 2, 3].includes(2); // includes 메서드는 ES6 기능

// 변환 후: 폴리필을 추가한 코드
var hasValue = [1, 2, 3].indexOf(2) > -1; // includes를 지원하지 않는 브라우저에서 대체 구현

 

 

프로젝트에 바벨과 폴리필 적용하기

1. Babel 설정

Babel을 프로젝트에 적용하는 방법은 여러 가지가 있지만, 보편적이고 효율적인 방법은 npm을 이용해 @babel/cli, @babel/preset-env, @babel/core와 같은 필수 패키지를 설치하고, 이를 .babelrc 파일로 설정하는 것이다. 이렇게 하면 최신 자바스크립트 코드를 쉽게 ES5 이하로 변환할 수 있다.

 

Babel 설치

npm install --save-dev @babel/core @babel/cli @babel/preset-env

 

Babel 설정 파일 생성

프로젝트 루트 디렉토리에 .babelrc 파일을 생성하고, @babel/preset-env를 사용하여 변환할 JavaScript의 범위를 설정한다. @babel/preset-env는 현재 실행 환경을 기준으로 필요한 변환만 수행할 수 있어 매우 효율적이다.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "> 0.25%, not dead"  // 구형 브라우저를 지원하기 위한 설정
      }
    ]
  ]
}

 

Babel 실행

이제 Babel을 실행하여 최신 자바스크립트 파일을 ES5 이하로 변환할 수 있다. 예를 들어, src 폴더에 있는 JavaScript 파일을 dist 폴더로 변환하려면 아래와 같은 명령어를 실행한다.

npx babel src --out-dir dist

 

2. Polyfill 적용하기

Babel은 문법을 변환할 수 있지만, 내장 함수나 API는 변환하지 않습니다. 이때 필요한 것이 바로 폴리필(polyfill)이다. 최신 자바스크립트 기능을 구형 브라우저에서 사용할 수 있도록 폴리필을 추가하는 방법은 크게 두 가지가 있다.

 

core-js와 regenerator-runtime 설치

가장 널리 사용되는 폴리필 라이브러리는 core-js와 regenerator-runtime이다. core-js는 ES6 이상에서 추가된 기능들을 폴리필해주고 regenerator-runtime은 async/await와 같은 비동기 기능을 폴리필해준다.

 

npm install --save core-js regenerator-runtime

 

Polyfill을 Babel 설정에 포함시키기

@babel/preset-env에서는 자동으로 필요한 폴리필을 추가해주는 기능이 있다. 이때 useBuiltIns와 corejs 옵션을 설정하여 어떤 방식으로 폴리필을 적용할지를 결정할 수 있다. useBuiltIns 옵션을 entry로 설정하면, 프로젝트 진입점에서 사용되는 기능에 맞춰 폴리필을 자동으로 포함시켜준다.

 

.babelrc 파일을 아래와 같이 수정한다.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "> 0.25%, not dead",  // 구형 브라우저를 지원하기 위한 설정
        "useBuiltIns": "entry",         // 진입점에서 폴리필 자동 삽입
        "corejs": 3                     // core-js 3 버전 사용
      }
    ]
  ]
}

 

그리고 진입점 파일(예: index.js)에서 core-js와 regenerator-runtime을 임포트한다.

import "core-js/stable";       // 최신 자바스크립트 기능에 대한 폴리필
import "regenerator-runtime/runtime";  // async/await 폴리필

// 이제 ES6+ 코드가 구형 브라우저에서도 정상 동작함

 

Polyfill을 선택적으로 적용하기

전체 프로젝트에서 모든 폴리필을 적용할 필요가 없고, 특정 기능만 필요한 경우 useBuiltIns: 'usage'를 설정하여 필요한 폴리필만 자동으로 적용할 수 있다. 이 경우는 프로젝트에서 사용한 기능에 따라 필요한 폴리필만 포함되므로 코드가 더 경량화된다.

{
  "presets": [
    [
      "@babel/preset-env",
      {
        "targets": "> 0.25%, not dead",  // 구형 브라우저를 지원하기 위한 설정
        "useBuiltIns": "usage",         // 사용된 기능에 맞는 폴리필만 삽입
        "corejs": 3                     // core-js 3 버전 사용
      }
    ]
  ]
}

 

최적화와 효율성 고려하기

폴리필과 Babel 설정을 프로젝트에 통합하면, 최신 자바스크립트 기능을 구형 브라우저에서도 사용할 수 있지만 아래와 같은 최적화를 고려해야 한다.

• 트리 쉐이킹(Tree Shaking): 불필요한 코드가 포함되지 않도록, Babel의 변환과 폴리필 적용이 끝난 후 불필요한 부분을 제거하는 트리 쉐이킹을 적용할 수 있다. 이를 위해 Webpack이나 Rollup과 같은 번들러에서 설정을 추가해야 한다.
• 선택적 폴리필: 모든 폴리필을 적용하지 않고, 필요한 것만 적용하는 방식(useBuiltIns: 'usage')을 사용하는 것이 성능 측면에서 더 유리하다.
• 브라우저 지원 범위 설정: @babel/preset-env의 targets 옵션을 통해 필요한 브라우저만 지원하도록 설정하면, 불필요한 코드 변환을 방지할 수 있다.

참고문헌

GitHub - zloirock/core-js: Standard Library

똑똑하게 브라우저 Polyfill 관리하기