[ES5] Babel과 Polyfill

 

트랜스파일러 Transpiler

트랜스파일러는 소스 코드를 한 프로그래밍 언어에서 다른 프로그래밍 언어로 변환해주는 도구이다. 주로 최신 버전의 언어를 구형 버전의 언어로 변환하는 과정을 거쳐 원본 코드와 동일한 동작을 하는 대상 언어 코드를 생성한다.

 

최신 버전의 자바스크립트(ES6/ES2015)를 구형 버전인 ES5로 변환해주는 Babel이 대표적인 예이다. 변환을 통해 구형 브라우저에서도 동작할 수 있도록 지원하고, 변환된 코드는 호환성을 확보하면서 최신 기능을 사용할 수 있는 이점을 제공한다.

 

트랜스파일러는 언어 간의 문법 차이나 기능 지원 차이를 극복하여 크로스플랫폼 개발이나 호환성을 향상시키는데 사용된다. TypeScript의 컴파일러나 CoffeeScript의 컴파일러 등이 트랜스파일러 예시이다.

 

트랜스파일러를 사용하면 개발자는 최신 언어의 기능과 문법을 사용할 수 있으면서도 호환성을 유지할 수 있어 개발 효율성이 높아진다.

 

 

자바스크립트 트랜스파일러

바벨이 가장 인기 있는 트랜스파일러이며, 그 외에도 TypeScript, Buble, SWC, Closure Compiler 등이 있다.

 

 

바벨 Babel

바벨은 자바스크립트 트랜스파일러로 최신 버전의 자바스크립트 코드를 구형으로 변환해주는 역할을 수행한다. 바벨은 다양한 빌드 도구와 통합하여 사용할 수 있으며, Webpack과 함께 사용해 모듈 번들링과 트랜스파일링을 한 번에 처리할 수 있다.

 

그러나 추가적인 빌드 단계를 필요로 하고, 성능 문제를 일으킬 수 있다. 특히 큰 규모의 프로젝트에서는 트랜스파일링 속도가 느려질 수 있다. 그 외에도 오래된 환경 지원에 한계가 있을 수 있다. 일부 기능이 완벽하지 않을 수 있고, 크로스브라우징 이슈의 완벽한 대안이 되지 못하는 점이 있다.

 

뿐만아니라 브라우저나 실행 환경에 존재하지 않는 내장기능이나 API는 변환하지 못한다는 점이 있다. fetch나 Promise의 경우와 같은 예이다. 이 경우 폴리필을 사용해 문제를 해결할 수 있다.

 

 

바벨, 폴리필 예시

바벨

// 변환 전: 최신 자바스크립트 문법 사용
const greet = (name) => `Hello, ${name}!`;
 
export default greet;
 
 
// 변환 후: ES5 이하의 자바스크립트로 변환됨
var greet = function greet(name) {
  return "Hello, " + name + "!";
};
 
module.exports = greet;

 

폴리필

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

 

Babel 사용하기

Web버전

Babel · Babel

*FORCE ALL TRANSFORMS 옵션 체크

 

설치버전

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

 

 

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옵션을 통해 필요한 브라우저만 지원하도록 설정하면, 불필요한 코드 변환을 방지할 수 있다.

 

 

 

https://fabric0de.tistory.com/86