바벨
바벨이란?
자바스크립트 트랜스파일러.
보통 모던 자바스크립트를 호환성을 위해 예전 문법으로 변환할때 사용한다.
Typescript와 JSX 코드를 변환할 때도 사용한다.
바벨 설정 파일 예시
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
{
"presets": [
[
"@babel/env",
{
"targets": {
"chrome": "79", // 예시) 크롬 79까지 지원하는 코드를 만든다.
"edge": "17",
"firefox": "60",
"safari": "11.1",
},
"useBuiltIns": "usage",
}
]
]
}
Plugin/Preset
- Plugin : 규칙 하나하나를 적용할 때 사용
- Preset : 여러 개의 규칙을 한번에 적용할 때 사용
@babel/preset-env: ES6 이상 문법을 ES5 문법의 코드로 변환해주는 규칙을 정의함.@babel/preset-react: 리액트 코드 변환
Polyfill
babel을 사용해도 변환할 수 없는 모던자바스크립트 코드들이 있다. 바로 Promise와 같은 것들인데, 이를 변환하기 위해선 Polyfill을 사용하여야한다.
바벨에서 설정하여도 되고, 웹팩에서 설정해도 된다.
바벨에서 사용할때는 @babel/plugin-transform-runtime 사용(@babel/polyfill은 deprecated)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
{
"plugins": [
[
"@babel/plugin-transform-runtime",
{
"absoluteRuntime": false,
"corejs": 3,
"helpers": true,
"regenerator": true,
"useESModules": false
}
]
]
}
출처
https://www.daleseo.com/js-babel/
https://ingg.dev/babel/
https://okchangwon.tistory.com/3