Babel 바벨

 Babel 

 

• 바벨 공식문서에서는 바벨을 자바스크립트 컴파일러라고 소개하며 최신 자바스크립트 문법을 사용할 수 있다고 나와있으며 더 정확하게 말하면 트랜스파일러라고 말할 수 있습니다.
• 왜 바벨이 필요하고 바벨이 있어야만 자바스크립트의 최신 문법을 사용할 수 있는 이유는 자바스크립트가 실행되는 환경때문입니다. 다른 언어와 달리 자바스크립트는 정말 많은 환경에서 실행되는데 웹 브라우저, NodeJS, Deno 등에서 실행되는데 웹 브라우저 또한 각자 다른 자바스크립트 엔진을 통해 자바스크립트 코드를 읽게 됩니다.
• 게다가 이렇게 실행되는 환경의 버전에도 자바스크립트는 영향을 받으며 특정 버전 이상에서만 실행되는 코드가 있고 특정 브라우저에서는 실행되지 않는 코드도 있습니다. 그렇기 때문에 모든 자바스크립트 실행 환경에서 정상적으로 동작할 수 있도록 하려면 바벨이 필요하다.

 

 

 

바벨 설치

 

다음과 같이 바벨의 기본 모듈들을 설치해줍니다.

$npm i -D @babel/core @babel/cli @babel/preset-env

 

각 모듈은 다음과 같은 역할을 합니다.

• @babel/core: 바벨의 핵심 기능들을 포함.
• @babel/cli: 터미널에서 바벨 명령어를 사용할 수 있게 도와줍니다.
• @babel/preset-env: 코드 구문 변환 설정을 도와줌 (지원 브라우저 점유율, 호환성 설정 등)

 

$npm i -D @babel/plugin-proposal-optional-chaining

옵셔널 체인징과 같은 플러그인 또한 설치 하여 설정할 수 있습니다.

 

 

 

바벨 공식문서의 플러그인 메뉴로 이동하면 친절하게 문법마다 필요한 플러그인들을 설명해주고 있습니다.

https://babeljs.io/docs/en/babel-core

Babel · The compiler for next generation JavaScript

 

 

 

babel.config.json

{
  "presets": [
    [
      "@babel/env",
      {
        "targets": "> 2%, not dead"
      }
    ]
  ],
  "plugins": ["@babel/plugin-proposal-optional-chaining"]
}

 

• 다음과 같이 babel.config.json파일을 생성해 적용하면 됩니다. 
• presets에는 바벨에 대한 설정을 넣을 수 있는데 다음 코드는 전세계 2%이상의 점유율을 가진 브라우저에서 동작 가능하도록 설정한 옵션입니다.
• 이런식으로 브라우저 점유율을 통해 설정을 할 수도 있고 각 브라우저(크롬, 사파리 등)마다 버전을 지정해 설정해줄 수 도 있습니다.