바벨이란?

• 자바스크립트 컴파일러
• 최신 자바스크립트 문법을 낮은 버전의 자바스크립트 문법으로 변환
• 리액트 JSX문법을 자바스크립트로 변환
• 타입스크립트와 같은 정적타입언어 변환
• 코드 압축(주석, 띄어쓰기, 줄바꿈 등 제거)

실행방식

• @babel/cli
• webpack : babel-loader
• @babel/core 로 직접 실행
• @babel/register 로 실행 : Node에서 require실행 될 때 바벨실행하도록 할 수 있다.

리액트와 함께 사용할 때는 @babel/cli, babel-loader, @babel/core 를 자주 사용한다.

설치

npm init을 통해 초기화 이후 아래 파일을 설치하도록 하자!

npm i @babel/core @babel/cli @babel/plugin-transform-arrow-functions @babel/plugin-transform-template-literals @babel/preset-react

• @babel/core : 필수 패키지, 바벨을 실행하기 위해 꼭 설치해야 한다
• @babel/cli : 바벨실행기
• @babel/preset-react : 리액트 프리셋
• @babel/plugin-transform-arrow-functions : 화살표 함수 관련 플러그인
• @babel/plugin-transform-template-literals : 템플릿문자열 관련 플러그인

테스트

// JSX 문법
const element = <div>babel test</div>;
// 템플릿 문자열
const text = `element.type is ${element.type}`;
// 화살표 함수
const add = (a, b) => a + b;

테스트 코드를 작성하였다. 위의 코드를 바벨을 통해 실행 시켜보자. 콘솔에 직접 입력해도 되지만 편의를 위해 package.json 파일에 scripts를 작성하여 사용하였다.

const element = /*#__PURE__*/React.createElement("div", null, "babel test");
const text = "element.type is ".concat(element.type);

const add = function (a, b) {
  return a + b;
};

실행 후 코드의 모습이다. 각 변수와 함수의 모습이 이전의 버전 자바스크립트 형태로 변환된 것을 확인할 수 있다.

• JSX 문법 : React.createElement() 함수로 대체 되어 사용
• 템플릿 문자열 : .concat()으로 대체
• 화살표 함수 : 익명함수-변수방식으로 대체

스크립트 작성하기

// package.json
"scripts": {
    "babel": "npx babel src/code.js --presets=@babel/preset-react --plugins=@babel/plugin-transform-template-literals,@babel/plugin-transform-arrow-functions",
  },

npm run babel or yarn babel 명령을 통해 실행