Babel과 Webpack의 내부 동작 이해하기 - 3 polyfill

[실전 리액트 프로그래밍] polyfill을 설치해보자!

 

> 바벨과 폴리필

JS의 최신 기능을 모두 사용하면서, 오래된 브라우저에서도 최신 문법을 지원하려면

바벨로 코드 문법을 변환하는 동시에 폴리필도 사용해야 한다.

 

폴리필은 런타임에 기능을 주입하는 것을 말한다. 기능이 존재하는지 검사하여 없는 경우에만 주입한다.

바벨만으로는 최신 자바스크립트 표준에 추가된 모든 기능을 사용할 수 없다. 폴리필을 별도 설정해줘야 한다.

 

 

> 모든 폴리필 사용하기

import '@babel/polyfill';

module.exports = {
  entry: ['@babel/polyfill', './src/index.js'],
  //...
};

웹팩 사용하는 경우는 entry 속성에 추가한다.

이 경우 필요하지 않은 폴리필까지 포함되어 번들 파일의 크기가 커진다.

 

> 필요한 폴리필만 가져오기

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

번들 파일 크기에 민감한 프로젝트에 적합하다.

 

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

babel.config.js

const presets = [
  [
    '@babel/preset-env',
    {
      targets: '> 0.25%, not dead',
      useBuiltIns: 'entry',
    },
  ],
];
module.exports = {presets};

target 속성으로 지원하는 브라우저 정보를 입력한다.

시장 점유율이 > 0.25% 이상이고 업데이트가 종료되지 않은 브라우저를 타겟으로 했다.

 

useBuiltIns 속성에 entry를 입력하면 지원하는 브라우저에서 필요한 폴리필만 포함시킨다.

하지만 필요는 한데, 사용하지 않는 속성들도 있을 수 있다.

useBuiltIns 속성에 usage를 입력하면 필요한 속성들 중 사용된 기능의 폴리필만 추가 된다.

 

js 파일의

 import '@babel/polyfill';
 
 // 모듈을 가져오는 코드가
 
 require("core-js/modules/es6.array.copy-within");
 require("core-js/modules/es6.array.fill");
 require("core-js/modules/es6.array.find");
 ...
 
 // 각 폴리필 모듈을 가져오는 여러 줄의 코드로 변환된다.