프레셋(Presets)이란?
플러그인으로 코드 변환을 하기 위해서는 필요한 플러그인을 각각 설정해야 했습니다.
module.exports = {
plugins: [
"@babel/plugin-transform-block-scoping",
"@babel/plugin-transform-arrow-functions",
"@babel/plugin-transform-strict-mode",
]
}
혹은
build :
> npx app.js --plugins=@babel/plugin-transform-block-scoping --plugins=@babel/plugin-transform-arrow-functions --plugins=@babel/plugin-transform-strict-mode
바벨은 필요한 플러그인들을 모아 만든 프레셋(Presets)이라는 기능을 제공합니다.
이제는 하나하나 세팅할 필요가 없습니다.
프레셋(Presets) 만들기
기존의 세개의 플러그인을 하나의 프리셋으로 만들어 보겠습니다.
module.exports = function custompreset(){
return {
plugins: [
"@babel/plugin-transform-block-scoping",
"@babel/plugin-transform-arrow-functions",
"@babel/plugin-transform-strict-mode",
]
};
}
module.exports = {
presets:['./customPreset.js']
}
build 결과 :
> npx babel app.js
"use strict";
// Babel Input: ES2015 arrow function, const/let 스코프
[1, 2, 3].map(function (data) {
return data + 1;
});
var test = 3;
var test2 = 5;
플러그인을 하나의 프리셋으로 묶어 babel.config.js 기본설정 파일 presets 배열에 추가만 해주면 됩니다.
바벨의 프레셋(Presets) 사용하기
바벨 곰식홈페이지에 들어가면 바벨은 목적에 맞는 프리셋을 제공합니다.
실제로 실무에서는 플로그인이나 커스텀 프리셋을 만들지 않고 바벨이 제공하는 프리셋을 사용합니다.
preset-react는 리액트를 preset-typescript는 타입스크립트를 preset-flow는 flow을 변환해주는 프리셋입니다.
이번 포스트는 ES6 문법으로 진행할 것이기 때문에 preset-env에 대해서만 알아보도록 하겠습니다.
preset-env
preset-env은 대상 환경에 필요한 변환을 세세하게 관리할 필요 없이, 최신 ES2015+ Javascript를 사용할 수 있는 환경을 제공합니다. 이전에는 연도별로 프리셋을 제공했지만
(babel-reset-es2015, babel-reset-es2016, babel-reset-es2017, babel-reset-latest …) 이제는 preset-env로 통합하여 제공합니다.
install :
npm install --save-dev @babel/preset-env
module.exports = {
presets: [
"@babel/preset-env"
]
}
build 결과 :
> npx babel app.js
"use strict";
// Babel Input: ES2015 arrow function, const/let 스코프
[1, 2, 3].map(function (data) {
return data + 1;
});
var test = 3;
var test2 = 5;
Options
targets
- 브라우저의 최소 환경 버전을 지정하여 타겟 브라우저 환경에 맞는 플러그인들을 찾아 변환해 줍니다.
-
targets에 아무것도 지정하지 않으면 최상위 옵션이 설정됩니다. -
targets에 브라우저를 여러개 지정하면, 바벨은 알아서 최소 환경 기준으로 변환 합니다.
브라우저 호환성 체크
- can i use 에서 확인
- 크롬 58 버전은
arrow function,const,let을 모두 제공하지만IE10은 제공하지 않습니다. 최저 환경인IE10기준으로 변환 되는지 확인해보겠습니다.
module.exports = {
presets: [
[
"@babel/preset-env",
{
targets: {
chrome: "58",
ie: "10"
}
}
]
]
}
build 결과 :
> npx babel app.js
"use strict";
// Babel Input: ES2015 arrow function, const/let 스코프
[1, 2, 3].map(function (data) {
return data + 1;
});
var test = 3;
var test2 = 5;
폴리필(polyfills)
-
useBuiltIns옵션을 다루기전에 폴리필이라는 개념을 먼저 알아야합니다. 예제를 보시면app.js에 ES6 문법인new Promise()사용했습니다. - 하지만
build결과는 변함이 없습니다. 바벨은 ES6에서 ES5로 변환할 수 있는 것만 빌드합니다. - 그렇지 못한 것들은
폴리필(polyfills)이라고 부르는 코드조각을 추가하여 해결합니다. - 정리하여
Promise()는ES5로 변환할 수 없기 때문에, 폴리필을 사용하여ES5버전에서 구동될 수 있도록 구현합니다.
// Babel Input: ES2015 Promise
new Promise()
module.exports = {
presets: [
[
"@babel/preset-env",
{
targets: {
chrome: "58",
ie: "10"
}
}
]
]
}
build 결과 :
> npx babel app.js
"use strict";
// Babel Input: ES2015 Promise
new Promise();
분명 preset-env 프리셋을 적용했는대도 ES5로 변환이 안됩니다. 그
useBuiltIns
-
useBuiltIns은 폴리필을 처리하는 방법을 구성합니다. -
"usage","entry",false3가지 중 하나를 선택, default는 false -
"usage","entry"옵션을 선택하면core-js을 모듈로 가져와서 사용합니다. -
@babel/polyfill은 7.4.0버전부터는 사용되지 않습니다. 따라서 직접 추가하는 것을 추천하고 있습니다.
install :
npm install core-js@3 --save
## or
npm install core-js@2 --save
corejs의 기본값은 “2” 버전입니다.
module.exports = {
presets: [
[
"@babel/preset-env",
{
useBuiltIns: "usage",
corejs: {
version: 2,
},
},
],
],
}
build 결과 :
-
corejs의 기본값은 “2” 버전입니다.build결과를 보면corejs에서Promise모듈을import하는 구문이 상단에 추가된 것을 확인할 수 있습니다. -
corejs를install해서 직접import구문을 추가하는 방법을 사용해도 무관합니다.
> npx babel app.js
"use strict";
require("core-js/modules/es6.object.to-string.js");
require("core-js/modules/es6.promise.js");
// Babel Input: ES2015 Promise
new Promise();