바벨(Babel)

바벨(Babel)

💡

바벨(Babel)은 트랜스파일러(transpiler)로, 모던 자바스크립트 코드를 구 표준을 준수하는 코드로 바꿔줍니다.

---

• 브라우저가 ES6나 ES7(최신표준) 브라우저가 이해하지 못하기때문에 ES5로 바꿔주는 과정이 필요
• 이 과정을 해주는 자바스크립트 컴파일러가 바벨
• babel을 사용한다고 해서 모든 최신 자바스크립트 함수를 다 사용할 수 있는 것은 아님
• 브라우저에서 지원하지 않는 함수를 검사하는 작업이 프로그램 시작에 진행되어야함
  • 이 역할은 babel-polyfill이 담당

바벨의 주요 역할

1. 트렌스 파일러

바벨은 코드를 재작성해주는 트랜스파일러 프로그램

• 이를 실행하면 기존 코드가 구 표준을 준수하는 코드로 변경
• 변경된 코드는 웹사이트 형태로 사용자에게 전달
• 웹팩(webpack)과 같은 모던 프로젝트 빌드 시스템은 코드가 수정될 때마다 자동으로 트랜스파일러를 동작
• 이런 과정이 없으면 개발이 끝난 코드를 한데 통합하는 데 어려움이 있을 수 있음

1. 폴리필

변경된 표준을 준수할 수 있게 기존 함수의 동작 방식을 수정하거나, 새롭게 구현한 함수의 스크립트

• 새롭게 표준에 추가된 함수는 명세서 내 정의를 읽고 이에 맞게 직접 함수를 구현해야 사용할 수 있음
• . 자바스크립트는 매우 동적인 언어라서 원하기만 하면 어떤 함수라도 스크립트에 추가할 수 있음
• 기존 함수를 수정하는 것도 가능
• 개발자는 스크립트에 새로운 함수를 추가하거나 수정해서 스크립트가 최신 표준을 준수할 수 있게 작업할 수 있음
• 폴리필(polyfill)은 말 그대로 구현이 누락된 새로운 기능을 메꿔주는(fill in) 역할
  • 주목할 만한 폴리필 두 가지
    • core js – 다양한 폴리필을 제공합니다. 특정 기능의 폴리필만 사용하는 것도 가능
    • polyfill.io – 기능이나 사용자의 브라우저에 따라 폴리필 스크립트를 제공해주는 서비스

.babelrc

💡 .babelrc

Babel 컴파일러의 설정 파일

• JSON 형식 또는 JavaScript 모듈 형식으로 작성
• Babel의 플러그인과 프리셋을 구성하는 설정 정보가 포함
• 플러그인은 개별 변환 작업을 수행하고, 프리셋은 특정 환경 또는 플랫폼을 대상으로 한 미리 정의된 변환 설정을 제공 </aside>

1. presets

{
  "presets": [
    "@babel/preset-env",
    "@babel/preset-react"
  ]
}

• presets 속성은 미리 정의된 변환 설정 그룹을 지정
• 프리셋은 일련의 플러그인 집합으로 구성되어 특정 환경이나 플랫폼을 대상으로 하는 일반적인 변환을 수행하는 데 사용

2. plugins

{
  "plugins": [
    "@babel/plugin-transform-arrow-functions",
    "@babel/plugin-transform-classes"
  ]
}

• 개별적인 변환 작업을 수행하는 플러그인을 지정
• 플러그인은 변환할 특정 기능 또는 문법을 대상으로 하며, 자신만의 변환 규칙을 정의

3. ovverrides

{
  "presets": [
    "@babel/preset-env"
  ],
  "overrides": [
    {
      "test": "./src/app",
      "presets": [
        "@babel/preset-react"
      ]
    }
  ]
}

• 특정 파일 또는 디렉토리에 대한 추가적인 변환 설정을 정의하는 데 사용
• 이를 통해 프로젝트의 일부 JavaScript 파일에 대해 다른 변환 규칙을 적용

Reference

https://juneyr.dev/2019-02-20/webpack-babel

https://ko.javascript.info/polyfills