Babel

1.Babel이란 무엇인가?

바벨은 주로 ES16코드를 이전 버전의 호환가능한 자바스크립트로 변환시켜주는 툴체인이다.

 

2. .babelrc

babel의 설정을 관리하는 파일

 

3.plugin

바벨은 컴파일러입니다.(소스코드 => 결과물 코드로 변환 시켜주는)

다른 많은 컴파일러들과 같이 바벨은 3 단게로 동작합니다.

파싱, 변환, 출력. 이것들을 가능하게 하것이 바로 플러그인 입니다.

 

바벨은 별도의 설치나 구성없이는 아무 것도 동작하지 않습니다.

바벨이 동작하게 하려면 플러그인을 추가시켜야 합니다.

개별적인 플러그인 대신에 플러인의 집합인 preset을 사용할 수도 있습니다.

 

참고-https://babeljs.io/docs/en/plugins

Babel · The compiler for next generation JavaScript

 

4.preset

플러그인의 집합이며 심지어 공유가능한 options config 역할을 할 수도 있다.

 

1.@babel/preset-env

구문변환이 필요한 세부설정 없이 최신 자바스크립트 를 사용할 수 있도록 합니다.

 

2.@babel/cli

• 커맨드 라인에서 바벨을 실행할 수 있는 바이너리 파일이 들어있다.

3.@babel/preset-react

• JSX로 작성된 코드들을 createElement 함수를 이용한 코드로 변환해 주는 바벨 플러그인이 내장되어 있다.

• 리액트 애플리케이션을 만들 때 필요한 플러그인들의 집합

참고-https://velog.io/@c08h/babelcli-babelpreset-react

@babel/cli, @babel/preset-react 란?