babel 공식문서 @babe/polyfill
babel 공식문서 @babe/preset-env
core-js github 문서
실전 리액트 프로그래밍/이재승 저
browserslist 패키지 문법
폴리필(polyfill)
자바스크립트의 최신기술을 구버전 브라우저에서 사용하기 위해서는 변화과 함께 폴리필도 사용해야 한다. 폴리필은 런타임 기능 주입을 말한다. 런타임 기능 주입이 뭐야? 한다면, 브라우저에서 코드가 실행될 때 기능이 있는지 없는지 확인한 뒤 없을 경우에만 코드 변환을 하는 기능을 말한다.
Q. 바벨을 쓰면 최신 문법 전부 적용 되는거 아니였나요?
A. 네, 아니에요. 바벨 써도 폴리필 설정 해줘야 해요// 폴리필 코드 예 // ES8의 String.padStart()가 있는지 확인하고 없으면 폴리필 함수를 대입하게 된다. if(!String.prototype.padStart) { String.prototype.padStart = 폴리필 함수 대입; }
@babel/polyfill
@babel/polyfill 는 바벨 공식 폴리필 지원 패키지다. 모든 폴리필을 포함시키기고 있기 때문에 별다른 설정없이 패키지를 import 하여 사용한다. 단순한 사용법이 가장 큰 장점이라면, 파일이 크기가 크다는 것이 단점이다.
파일 크기에 너그러운 프로젝트에 추천, 가장 쉽게 폴리필을 적용할 수 있는 방법!
import '@babel/polyfill'
// 이하 코드 작성하기@babel/polyfill with Webpack
// @babel/polyfill을 사용하기 위한 설정
module.exports = {
entry: ['@babel/polyfill', './src/index.js'],
// 이하 설정 생략
};- entry에 폴리필 패키지를 추가시켰다.
core-js의 polyfill
@babel/polyfill 도 내부적으로는 core-js패키지를 사용한다. 즉, @babel/polyfill를 사용하지 않고 core-js 패키지로 부터 필요한 폴리필만 가져와 사용하면 파일 크기를 줄일 수 있다. 파일 크기에 민감한 프로젝트에 추천
@babel/preset-env
실행 환경에 대한 정보를 설정해주면 자동으로 필요한 기능을 주입해준다.
적당한 번들 파일 크기 유지하면서 폴리필 빼먹는 실수를 막기위해 @babel/preset-env 사용이 가정 합리적인 선택이 될 수 있다
babel.config.js에 실행환경 정보작성
// babel.config.js
const presets = [['@babel/preset-env', { targets: '>0.25%, not dead' }]];
// ... 설정 등등등
module.exports = { presets };- targets 속성으로 지원하는 브라우저 정보를 입력한다. (시장점유율 0.25퍼센트 이상, 업데이트가 죽지 않은 브라우저)
- targets에 사용된 속성은 browserslist 패키지 문법을 확인하고 사용하자.
// @babel/preset-env 프리셋으로 폴리필 설정하는 방식
const presets = [['@babel/preset-env', { targets: '>0.25%, not dead' }]];
const presets = [
[
'@babel/preset-env',
{
targets: {
chrome: '40',
ie :'버전',
// ... 브라우저 정보
},
useBuiltIns: 'entry', // 폴리필 관련 설정 : 지원하는 브라우저에 필요한 폴리필만 포함
},
],
];
module.exports = { presets };- targets : 크롬 40버전 이상을 설정
- useBuiltIns : 폴리필 관련 설정
- entry 옵션 : 지원 브라우저에 필요한 폴리필만 골라가져온다(core-js폴리필 중 브라우저에 없는 기능 모두)
- usage 옵션 : entry옵션시 폴리필에서 내가 작성한코드에 필요한 폴리필 만 골라서 (폴리필이 최적화 된다)
