신나는 개발...
바벨의 Configuration과 Polyfill 본문
필요에 의해 설정파일을 사용하는 몇개의 다른 방법이 있다. 어떻게 바벨을 설정하는지 더 원한다면 상세 가이드(configure Babel)를 참조해라
이제 babel.config.json이라는 파일을 아래와 같이 만들어보자
{
"presets": [
[
"@babel/env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1"
}
}
]
]
}
이제 env preset은 오직 우리의 타겟 브라우저에서 사용이 불가능한 기능에 대한 변환 플러그인만 불러온다. 이제 폴리필을 봐보자...
Polyffill
🚨 바벨 7.4.0부로 이 패키지(@babel/polyfill)는 권장되지 않고 core-js/stable과 regenerator-runtime/runtime을 직접 import (ECMAScripts 형식을 polyfill하기 위한)하도록 권장한다.
import "core-js/stable";
import "regenerator-runtime/runtime";
@babel/polyfill모듈은 모든 ES2015+환경을 맞추기 위해 core-js와 regenerator runtime을 포함한다.
이건 Promise나 WeakMap, array와 같은 static함수 같은 새로운 기능을 사용할 수 있음을 의미한다. ployfill은 string과 같은 native prototypes도 global에 추가한다.
라이브러리/툴의 제작자들에게 이건 좀 과할 수 있다. Array.prototype.includes와 같은 instance 함수를 원하지 않는다면 global scope를 오염시키지 않도록 @babel/polyfill 대신에 transform runtime 을 사용할 수 있다.
더 나아가서 어떻게 원하는 ployfill이 나타나는지 정확히 알고싶다면 core-js 이걸 참조하세요~!
설치 :
npm install --save @babel/polyfill
useBuiltIns옵션은 usage로 설정되었을 때 최적화를 각각 적용한다. 이 최적화는 필요한 polyfill만 포함할 수 있다는 식으로 위에서 언급 된 최적화이다. (언제...?)
새로운 옵션과 함께 아래처럼 변경해보자.
{
"presets": [
[
"@babel/env",
{
"targets": {
"edge": "17",
"firefox": "60",
"chrome": "67",
"safari": "11.1",
},
"useBuiltIns": "usage",
}
]
]
}
바벨은 타겟 환경에서 놓친것이 있는지 모든 코드를 점검하고 필요한 ployfill만 불러올거다. 예를들면
Promise.resolve().finally();
Edge17은 Promise.prototype.finally를 제공하지 않으므로 위의 코드를 아래처럼 변환한다.
require("core-js/modules/es.promise.finally");
Promise.resolve().finally();
env preset 의 'useBuiltIns'옵션을 'usage'로 설정하지 않는다면 코드에서 가장 먼저 polyfill을 해야만 했을 것이다.
'weekly' 카테고리의 다른 글
Functional Programming in JavaScript, Part 1: The Unit (0) | 2020.04.08 |
---|---|
A Beginner’s Guide to Currying in Functional JavaScript (0) | 2020.04.04 |
바벨의 Plugins & Presets (0) | 2020.03.21 |
바벨 cli의 기본적 사용 (0) | 2020.03.21 |
babel 사용하기 (0) | 2020.03.21 |