0. 들어가며
Babel에 대해서 정리한 글이 이곳 저곳 나의 티스토리에 많이 있다.
하지만 모두 다른 블로그를 이곳 저곳 뒤지면서 정리한 내용이라 한눈에 이해가 되지 않는다.
이번 기회에 한번 다시 정리하고자 한다.
1. Babel?
입력과 출력이 모두 자바스크립트인 컴파일러이다.
ES6 코드, 리액트의 JSX, 타입 스크립트와 같은 언어를 ES5 코드로 변환해준다.
즉, 최신 자바스크립트 코드를 지원하지 않는 explorer 같은 브라우저에서
최신 자바스크립트 코드를 구버전 자바스크립트 코드로 호환이 가능하게 변환해준다.
2. Babel의 구동 방법
구동에 있어 필수인 패키지는 @babel/core 이다.
Babel을 사용하기 위해서 필수로 필요한 패키지이고 그 외에는
@babel/plugin-transform-arrow-functions
@babel/plugin-transform-template-literals같이 특정 ES6 코드를 변환하는데 필요한 패키지가 있을 수 있다.
{
plugins: ['@babel/plugin-transform-arrow-functions']
}이런 패키지를 Babel 파일안에 작성해주면 ES5로 컴파일을 해준다.
하지만 매번 필요한 ES6 코드에 맞춰서 plugin을 넣어주는 것은 꽤나 귀찮은 작업이다.
이것을 해결해주는 것이 preset이다.
@babel/preset-env
@babel/preset-flow
@babel/preset-react
@babel/preset-typescript다음과 같이 babel이 공식적으로 제공해주는 preset이 있으고 또 비공식 preset도 존재한다.
{
presets: ['@babel/preset-env']
}plugins 대신 presets를 사용하면 한번에 처리가 가능하다.
예를들어 위와 같이 @Babel/preset-env를 설정하면 모든 ES6 기능을 컴파일할 수 있다.
가장 많이 Babel을 사용하는 방식이 Webpack과 함께 사용하기 위한 babel.config.js를 사용하는 것이다.
Babel 설정 파일하면 가장 많이 나오는 것이 .babelrc와 babel.config.js일 것이다.
.babelrc의 경우 Babel 6 이전 버전에서 추천하는 설정 파일 형태이고
babel.config.js는 Babel 7이후 버전에서 추천하는 설정 방식이다.
babel.config.js는 전역 설정 파일이고 .babelrc의 경우 지역 설정 파일이라 .babelrc가 우선 순위는 더 높다.
const presets = [
[
'@babel/preset-env',
{
target: '> 0.25%, not dead',
useBuiltIns: "usage",
corejs:3
}
]
]
module.exports = { presets };
target 옵션
@babel/preset-env 프리셋이 타겟 브라우저에 필요한 플러그인만 삽입하도록 설정한다.
해당 옵션이 없으면 모든 브라우저에서 코드 변환이 일어난다.
'> 0.25%, not dead' 옵션 같은 경우 시장 점유율이 0.25% 이상이고 업데이트가 종료되지 않은
브라우저라는 뜻이다.
그 외에도
const presets = [
[
"@babel/preset-env",
{
targets: {
chrome: "40",
},
// ...
},
],
];방식으로 특정 브라우저의 버전을 선택해서 설정할 수 있다.
useBuiltIns 옵션
폴리필 삽입 방식을 설정하는 옵션이다.
폴리필( polyfill ) ?
바벨은 앞서 말했지만 구 브라우저에서도 최신 자바스크립트 코드를 작동할 수 있도록 변환해주는
컴파일러(트랜스파일러)이다.
바벨은 컴파일 타임에 코드를 구 브라우저에서도 사용할 수 있게 변경하지만,
ES6 이상에서 추가된 Promise, Map, Set 같은 전역 객체들이나, String.padStart 등 메서드는
컴파일 타임의 코드 변환으로는 어렵고 런 타임에 코드를 변경해야한다.
이때 런 타임에 코드 변환을 시켜주는 것이 바로 폴리필이다.
다시 useBuiltIns 옵션 이야기로 넘어가자면, 옵션 값으로 usage, entry, false가 있다.
false는 사용하지 않는다는 옵션이고, 그외 옵션은 core-js 모듈을 가져오는 코드를 타겟 브라우저에 맞게
삽입해준다.
entry 설정은 core-js/stable과 regenerator-runtime/runtime 모듈을 전역에 직접 삽입해야 가능하다.
이렇게 설정하면 타겟 환경에서 필요한 폴리필만 전역 스코프에 추가한다.
usage 설정은 실제 사용하는 폴리필만 삽입하는 방식으로
core-js/stable과 regenerator-runtime/runtime 모듈을 삽입할 필요가 없다.
entry 설정은 지정된 환경에 필요한 폴리필을 일단 전부 포함시키는 방식이고,
usage 설정은 필요한 폴리필만 포함하는 방식이다.
corejs 옵션
useBuiltIns 옵션과 함께 사용하는 옵션이다.
해당 옵션은 삽입되는 core-js 모듈의 버전을 설정한다. default 값은 2이지만,
version 2는 업데이트가 중단되어 version 3을 사용해야 한다.