JavaScript
Babel

바벨에 대해 설명해주세요

최신 JavaScript 문법으로 작성된 코드를 이전 JavaScript 문법으로 변환해주는 도구이다. 이를 통해 최신 JavaScript 문법을 이전 브라우저에서도 작동할 수 있게끔 변환해준다.

Babel is a JavaScript compiler

바벨은 현재 및 이전 브라우저 또는 환경에서 ECMAScript 2015+ 코드를 이전 버전과 호환되는 자바스크립트 버전으로 변환한다.

  • 구문 변환
  • 대상 환경에 없는 폴리필 기능
  • 소스코드 변환
// Babel Input: ES2015 arrow function
[1, 2, 3].map((n) => n + 1);
 
// Babel Output: ES5 equivalent
[1, 2, 3].map(function (n) {
  return n + 1;
});

동작 원리

파싱 (Parsing)

기존 소스코드를 읽어낸 뒤, AST(추상 구문 트리)로 변환한다.

소스코드를 수정하기 쉬운 구조로 변환하는 사전 작업이다.

변환 (Transforming)

AST를 정해진 규칙에 맞게 변경한다.

출력 (Printing)

AST를 소스코드로 변환한다.

바벨 구성

babal.config.json

  • 여러 패키지 디렉토리를 가진 프로젝트에서 하나의 바벨 설정을 적용하고 싶을 때
  • node_modules도 컴파일하고 싶을 때

babelrc.json

  • 프로젝트의 한 부분에서만 적용하고 싶은 구성이 있을 때

GPT로 문장 정리하기

바벨에 대해 설명해줘

  • JavaScript 코드를 변환해주는 오픈 소스 JavaScript 컴파일러
  • ECMAScript 2015+ (ES6+) 문법을 이전 버전의 JavaScript로 변환하여 다양한 환경에서 실행될 수 있도록 도움
  • 웹팩과 같은 빌드 도구와 함께 사용되어 모던 자바스크립트 코드를 번들링하고 최적화하는데 활용
  • 주요 특징과 기능
    • 트랜스파일링(Transpiling)
      • ES6+ 문법을 이전 JavaScript(주로 ES5)으로 변환
    • 플러그인 지원
      • ex) JSX 문법을 JavaScript로 변환하는 플러그인
    • 설정 파일(babel.config.js)
      • 프로젝트 루트에 babel.config.js 파일을 통해 설정 관리
      • 프로젝트의 특정 요구사항에 맞게 바벨 설정
    • 모듈 시스템 지원
      • CommonJS, AMD, ES6 모듈 등 다양한 모듈 시스템 지원

키워드 정리

  • 파싱
  • 변환
  • 출력

참고 자료

IntroduceClosure