미고렝 코딩

바벨(babel)이란?

바벨은 입력과 출력이 모두 자바스크립트 코드인 컴파일러다. 이는 보통의 컴파일러가 고수준의 언어를 저수준의 언어로 변환하는 것과 비교된다.

초기의 바벨은 ES6 코드를 ES5코드로 변환해주는 컴파일러였다. 현재는 바벨을 이용해서 리액트의 JSX문법, 타입스크립트와 같은 정적 타입 언어, 코드 압축, 제안(proposal)단계에 있는 문법 등을 사용할 수 있다.

폴리필(polyfill)이란?

폴리필이란 브라우저가 지원하지 않는 자바스크립트 코드를 지원 가능하도록 변환한 코드를 뜻한다. 하위 브라우저가 지원하는 자바스크립트 코드를 사용해 자바스크립트의 최신 기능을 똑같이 구현하는 방식이다.

바벨과 폴리필

자바스크립트의 최신 기능을 모두 사용하면서 오래된 브라우저를 지원하려면 바벨로 코드 문법을 변환하는 동시에 폴리필도 사용해야 한다. 폴리필은 런타임에 기능을 주입하는 것을 말한다. 런타임에 기능이 존재하는지 검사해서 기능이 없는 경우에만 주입한다. 바벨을 사용하면 최신 자바스크립트 표준에 추가된 모든 기능을 사용할 수 있다고 오해하기 쉽다. 바벨을 사용하더라도 폴리필에 대한 설정은 별도로 해야한다.

한가지 예로 ES8에 추가된 String.padStart 메서드는 폴리필을 이용해서 추가할 수 있다. 반면에 async await는 폴리필로 추가할 수 없으며, 컴파일 타임에 코드 변환을 해야한다.

core-js 모듈의 폴리필 사용하기

core-js는 바벨에서 폴리필을 위해 공식적으로 지원하는 패키지다. 가장 간단한 사용법은 core-js모듈을 자바스크립트 코드로 불러오는 것이다.

import 'core-js';
//core-js 모듈을 가져오면 해당 모듈의 모든 폴리필이 포함된다. 
//따라서 낮은 버전의 브라우저에서도 프로미스, Object.values, 배열의 includes메서드를 사용할 수 있다.
const p = Promise.resolve(10);
const obj = {
    a: 10,
    b: 20,
    c: 30,
}
const arr=  Object.values(obj);
const exist = arr.includes(20);

import 'core-js/features/promise';
import 'core-js/features/object/values';
import 'core-js/features/array/includes';
//core-js로 부터 직접 필요한 폴리필만 가져오면 번들 파일의 크기를 줄일 수 있다.
const p = Promise.resolve(10);
const obj = {
     a: 10,
     b: 20,
     c: 30,
};
const arr= Object.values(obj);
const exist = arr.includes(20);

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

@babel/preset-env 프리셋은 실행환경에 대한 정보를 설정해 주면 자동으로 필요한 기능을 주입해준다. 예를 들어, babel, config.js 파일에 다음 내용을 입력하면 특정 버전의 브라우저를 위한 플러그인 만 포함된다.

const presets= [
   [
      '@babel/preset-env',
      {
         targets: '> 0.25%, not dead',
         //targets 속성으로 지원하는 브라우저 정보를 입력한다.
         //여기서는 시장 점유율이 0.25% 이상이고 업데이트가 종료되지 않은 브라우저를 입력했다.
         //브라우저는 browserlist라는 패키지의 문법을 사용한다.
      },
   ]
];

module.exports= {presets};