Babel is a toolchain that is mainly used to convert ECMAScript 2015+ code into a backwards compatible version of JavaScript in current and older browsers or environments. Here are the main things Babel can do for you.
바벨은 브라우저에서 ES6 이상의 기능들을 사용하기 위해서 이전 버전의 자바스크립트 코드로 변환해주는 도구이다. (트랜스파일러)
바벨은 총 세 단계를 거쳐서 코드를 변환한다.
<aside> 💡 AST
컴퓨터 과학에서 추상 구문 트리(abstract syntax tree, AST), 또는 간단히 구문 트리(syntax tree)는 프로그래밍 언어로 작성된 소스 코드의 추상 구문 구조의 트리이다. 이 트리의 각 노드는 소스 코드에서 발생되는 구조를 나타낸다. 구문이 추상적이라는 의미는 실제 구문에서 나타나는 모든 세세한 정보를 나타내지는 않는다는 것을 의미한다. 예를 들어, 그룹핑을 위한 괄호는 암시적으로 트리 구조를 가지며, 분리된 노드로 표현되지는 않는다. 마찬가지로, if-condition-then 표현식과 같은 구문 구조는 3개의 가지에 1개의 노드가 달린 구조로 표기된다.
function square(n) {
return n * n
}
바벨은 파싱과 출력만 담당하고 변환 작업은 다른 녀석이 처리하데 이것을 "플러그인" 이라고 부른다. 바벨에는 다양한 플러그인이 있다. 하지만 각각 필요한 플러그인을 찾아서 일일이 적용하는 것은 번거롭다. 따라서 등장한 것이 프리셋이다.
"@babel/plugin-transform-block-scoping", // 블록스코프를 함수 스코프로 변경
"@babel/plugin-transform-arrow-functions", //화살표함수 변환
"@babel/plugin-transform-strict-mode", //stric mode 적용
패키지/플러그인 | 패키지 이름 | 설명 |
---|---|---|
Babel | @babel/cli | 터미널로 바벨을 사용할 수 있게 한다. |
Babel | @bable/core | 바벨의 핵심적인 기능 (파싱과 출력을 담당) |
Babel 프리셋 | @babel/preset-env | 프리셋은 다양한 플러그인을 모아둔 것이다. (변환을 담당) |
polyfill은 충전 솜을 의미한다. 부족한 솜을 채운다는 의미를 가지고 있다.
즉, 구 브라우저에서 최신 자바스크립트 코드를 사용하기 위해 Babel을 이용했지만, 일부 기능들은 polyfill로 추가해줘야 한다.
core-js
**만을 단독으로 사용하면 전역 스코프 오염이 발생할 수 있다. 따라서 @babel/plugin-transform-runtime을 함께 사용해준다. 하지만 axios 같은 경우 Promise에 의존한다. 즉 해당 패키지들을 포함해서 트렌스파일링을 진행해야 한다.