바벨

< yujin />·2023년 3월 8일

프론트엔드 개발환경의 이해와 실습

목록 보기

4/7

바벨(Babel)은 최신 JavaScript 문법을 이전 버전의 JavaScript로 트랜스파일 해주는 도구이다. 바벨을 통해 크로스 브라우징이 가능하다.

빌드와 트랜스파일

빌드 : 코드를 실행 가능한 형태로 변환하는 것 (컴파일, 패키징, 배포 등의 단계를 거침)
트랜스파일 : 한 프로그래밍 언어를 다른 프로그래밍 언어로 변환하는 것. TypeScript를 JavaScript로 변환하거나, ES6 이상의 문법을 하위 버전으로 변환하는 등 추상화를 유지한다.

설치

npm install @babel/core @babel/cli

설치된 패키지를 사용해 실행하면, 바벨은 기본적으로 세 단계의 빌드 과정을 거친다.

파싱(Parsing)
바벨은 입력된 코드를 이해하고, 추상 구문 트리(Abstract Syntax Tree, AST)라는 구조로 변환한다. AST는 코드의 구문 구조와 의미를 보존하는 구조체이다.
변환(Transformation)
바벨은 AST를 수정하고, ES6 이상의 문법을 이전 버전의 JavaScript로 변환한다. 이 단계에서는 커스텀 플러그인을 사용해 변환 작업을 확장할 수도 있습니다.
출력(Code Generation)
바벨은 변환된 AST를 원래 코드 형태로 되돌린다. 이 과정에서는 코드 압축과 난독화 등의 추가 작업을 수행할 수도 있다.

바벨은 이렇게 세 단계의 빌드 과정을 거쳐, 최신 JavaScript 문법을 이전 버전의 JavaScript로 변환하는 기능을 제공한다. 이를 통해, 모든 브라우저에서 동작하는 호환성 높은 JavaScript 코드를 생성할 수 있다.

플러그인

CRA에 내장되어있는 바벨 플러그인

@babel/plugin-proposal-class-properties
- 클래스 속성을 사용하는 JavaScript 코드를 변환하는 데 사용.
@babel/plugin-syntax-dynamic-import
- 동적 import 문법을 사용하는 코드를 변환하는 데 사용.
@babel/plugin-transform-runtime
- async/await 및 Promise와 같은 기능을 사용하는 코드를 변환하는 데 사용
@babel/plugin-proposal-object-rest-spread
- 객체 분해 및 확장 연산자를 사용하는 코드를 변환하는 데 사용.
@babel/plugin-proposal-optional-chaining
- 선택적 체이닝 연산자 (?.)를 사용하는 코드를 변환하는 데 사용.
@babel/plugin-transform-react-jsx
- JSX 문법을 사용하는 코드를 변환하는 데 사용.
@babel/preset-env
- 최신 JavaScript 문법을 예전 브라우저에서도 지원 가능하도록 해주는 preset

바벨 프리셋(preset)

프리셋

@babel/preset-env
보통 가장 많이 사용한다

module.exports = {
  presets: [
    [
      '@babel/preset-env', {
      targets: {
        chrome: '79', // 크롬과 ie 모두 동작할 수 있는 코드로 볂롼
      	ie: '11', // 버전명 기입	
      },
        useBuiltIns: 'useage', //or 'entry', false
        corejs: {
        version: 2, //or 3
    }]
  ]
}

다양한 바벨 프리셋

@babel/preset-react: React에서 JSX 구문을 사용할 수 있도록 해주는 프리셋.
@babel/preset-typescript: TypeScript에서 JSX 구문을 사용할 수 있도록 해주는 프리셋.
@emotion/babel-preset-css-prop: Emotion에서 CSS props를 사용할 수 있도록 해주는 프리셋.
@babel/preset-flow: Flow로 작성된 코드를 JavaScript로 변환해주는 프리셋.
@babel/preset-stage-0부터 @babel/preset-stage-4: ECMAScript proposal의 단계에 따라 선택적으로 실험적인 JavaScript 문법을 사용할 수 있도록 해주는 프리셋.
@babel/preset-env: 최신 JavaScript 문법을 사용할 수 있도록 해주는 프리셋. 이 프리셋은 목표 브라우저나 Node.js 버전에 따라 적절한 Babel 플러그인들을 자동으로 선택해준다.

CRA가 제공하는 바벨 프리셋

babel-preset-react-app
React와 함께 사용하기 적합한 기본 설정을 제공. 이 프리셋은 ES6 이상의 문법을 사용할 수 있게 해주고, JSX 문법을 JavaScript로 변환하는 등 React 애플리케이션을 빌드하는 데 필요한 바벨 설정을 모두 포함하고 있다.