[Babel] 폴리필(polyfill) - @babel/preset-env

kwonh·2020년 5월 2일
1

Babel

목록 보기
4/4
post-thumbnail

안녕하세요 폴리필(polyfill)에 대한 포스팅입니다.
바벨과 폴리필에대해서 처음 공부할 때 비슷해서 꽤 헷갈렸습니다.
먼저 작용하는 시점에 대해서 알아야할 필요가 있었습니다.

  • 컴파일 타임 & 런 타임

이 글에서
컴파일-타임은 바벨이 컴파일하는 시점
런-타임은 브라우저에서 실행되는 시점이라고 생각하면 됩니다.

웹에서의 런 타임 환경에는 DOM, Ajax, setTimeout 과같이 브라우저에서 제공하는 API같은 WebAPI와 이벤트루프, 콜백큐 등이 포함됩니다.

  • 폴리필 (polyfill) ?

바벨은 지금까지 사용해봤지만 폴리필은 뭘까요?

폴리필은 런-타임에 필요한 기능을 주입하는 것입니다.
다시말해 브라우저에서 실행되는 시점에 필요한 기능을 주입한다는 것인데요

먼저 Babel에 대해서 보면
Babel구 브라우저에서도 최신자바스크립트 코드를 작동하도록 변환해주는 컴파일러(혹은 트랜스파일러)입니다.

Babel컴파일-타임에 코드를 구 브라우저에서 사용가능하게 변환하지만, ES6이상에서 새롭게 추가된 Promise, Map, Set 같은 전역객체들이나 String.padStart등 전역 객체에 추가된 메서드등 컴파일-타임의 코드변환으로는 해결하기 어렵기 때문에 폴리필(polyfill) 이 필요한 것입이다.

즉, 구 브라우저에서 최신 자바스크립트 코드를 사용하기 위해 Babel을 이용했지만, 일부 기능들은 polyfill로 추가해줘야 하는 것입니다.

  • 폴리필 (polyfill) 사용 법

  • @babel/polyfill 모듈 사용 - deprecated
  • core-js에서 필요한 폴리필 가져오기 npm : core-js
  • @babel/preset-env 프리셋 이용하기

세 가지 방법외에 다른 방법도 있지만
이번 포스팅에서는 @babel/preset-env 프리셋을 이용하는 방법을 이용해 실습해보겠습니다.

  • @babel/polyfill - deprecated상태

간단히 위에서 언급한 패키지들에대해서 설명하면, @babel/polyfill 모듈은 바벨에서 공식으로 제공했던 폴리필 패키지인데, 현재는 deprecated상태입니다.
해당 모듈을 가져오면 모든 모듈내의 모든 폴리필이 추가됩니다. 따라서 단점으로 번들파일이 불필요하게 커집니다.

  • core-js에서 폴리필 가져오기

core-js는 폴리필을 위한 자바스크립트 표준모듈입니다.
npmjs:core-js

npmjs.com에서 core-js를 검색하면 간단한 사용법이 나옵니다. core-js모듈에서 필요한 폴리필만 가져오는 방법입니다.

import 'core-js/features/promise';
import 'core-js/features/object/values';
import 'core-js/features/array/includes';

그저 코드 최상단에 이런 식으로 import문만 적어주면됩니다.
코드의 크기가 작지만, 폴리필을 빠짐없이 작성해야하기 때문에 실수가 발생할 수도 있습니다.

  • @babel/preset-env 프리셋 이용하기

@babel/preset-env을 이용해보겠습니다. 지원할 브라우저 정보와 일부옵션을 지정하면 자동으로 필요한 기능들을 주입해줍니다.
자동 주입되는 필요한 기능들은 컴파일에 필요한 바벨변환 플러그인들과 core-js 폴리필들입니다.
번들파일의 크기에 민감하지만 않다면 가장 간편한 방법입니다.

1. 먼저 npm을 이용해 프리셋을 설치합니다.

npm i @babel/preset-env

2. 폴리필 테스트를 위한 적당한 코드를 작성합니다.

// code.js
const p = Promise.resolve(10);
const obj = {
    a : 10,
    b : 20,
    c : 30
};
const arr = Object.values(obj)
const exist = arr.includes(20);

3. .babelrc 설정파일을 작성합니다.

// .babelrc
{
    "presets": [
        ["@babel/preset-env",{
            "targets": ">= 0.25%, not dead"
        }]
    ]
}

.babelrc 설정파일을 살펴보겠습니다.

preset속성에 @babel/preset-env를 작성하고 두 번째 요소에 옵션을 적었습니다. targets는 대상 브라우저의 버전을 작성하는데, 이 때의 작성문법github:browserlist를 참고하면됩니다.
위 코드의 targets 옵션에는 "시장점유율이 0.25%이상, 업데이트가 종료되지 않은 브라우저를 대상" 으로 적었습니다.

앱을 만들기 전에 어떤 브라우저까지 지원할지를 결정한 뒤 사이트를 참고해 작성해야겠습니다.

@babel/prest-env는 적당한 번들파일 크기를 유지해주면서 폴리필을 하나씩 추가하는 부담을 줄여줍니다.

개인적으로 프로젝트를 만들 때 자주 사용할 것 같습니다!

@babel/preset-env더 알아보기

읽어주셔서 감사합니다!

profile
후회없는 하루를

0개의 댓글