[Babel] Babel 이란 무엇인가?

https://pixabay.com/ko/photos/두브로브니크-크로아티아-유럽-4106788/

 

Babel이란 무엇인가?

Babel은 자바 스크립트 컴파일러다!

즉, Javascript 파일을 입력으로 받고 출력으로 Javascript 파일을 반환한다.

 

Babel은 왜 필요한가?

Javascript만 생각했을 때 브라우저 종류와 그것의 버전 별로 지원하는 javascript 최대 버전이 있다.

즉, 어떤 환경(브라우저 종류와 버전)에서 최신 javascript 문법을 지원하지 않는 경우가 발생한다.

*IE(Internet Explore)는 자동 업데이트가 안돼서 주로 위와 같은 문제는 IE에서 발생한다고 한다.

 

때문에 작성된 javascript 파일을 브라우저가 이해할 수 있는 javascript 버전에 맞게 변환시킬 필요가 있고

babel을 통해 javascript 변환을 할 수 있다.

 

대표적으로 babel을 통해 ES6 문법으로 작성된 코드를 ES5로 변환해서 사용할 수 있다.

 

Plugin(플러그인)과 Preset(프리셋)

Babel에는 Plugin(플러그인)과 Preset(프리셋)이 있다.

Plugin과 Preset은 아래와 같이 정리할 수 있을 같다.

 

Plugin(플러그인): 입력으로 주어진 Javscript 파일을 목적에 맞게 변환시켜주는 역할을 한다.

Preset(프리셋): 하나의 목적을 위해 여러 Plugin을 모은 집합이다.

*Javascript 코드를 변환시키는 작업은 Plugin(플러그인) 단위로 실행된다고 한다.

 

Plugin 예시는 아래와 같습니다.

@babel/plugin-transform-arrow-functions: 화살표 함수를 변환해주는 플러그인

@babel/plugin-transform-template-literals: 템플릿 리터럴 코드를 변환해주는 플러그인

 

Babel 실행 예시

babel.config.js

const presets = [];
const plugins = [
    '@babel/plugin-transform-arrow-functions',
    [
        '@babel/plugin-transform-template-literals',
        {
            "loose": true
        }
    ]
];

module.exports = { presets, plugins };

 

beforeBabel.js

const test = 123123
const templateLiterals = `Template Literal Test! ${test}`
const arrowFunc = () => { console.log("바벨 테스트!"); }

 

dist.js

const test = 123123;
const templateLiterals = "Template Literal Test! " + test;

const arrowFunc = function () {
  console.log("바벨 테스트!");
};

 

babel.config.js 설정 파일이 위와 같은 상황에서

beforeBabel.js 파일에 대하여 babel을 실행하면 dist.js처럼 파일이 변환됩니다.

---

참고 자료

실전 리액트 프로그래밍 리액트 훅부터 Next.js까지(개정판) - 이재승

https://jeonghwan-kim.github.io/series/2019/12/22/frontend-dev-env-babel.html - 김정환 블로그

 

 

주니어 개발자가 공부하며 정리한 포스트입니다!

혹시 본 게시글 중 틀린 내용이 있다면 댓글을 통해 알려주세요 :)