Babel ⚡️

바벨의 공식 홈페이지에 따르면 바벨은 자바스크립트 컴파일러이다. 라고 나와있다.

하지만, 바벨의 역할에 대해 이해한다면 컴파일러보다는 트랜스파일러 라는 것을 알 수 있다.

모든 브라우저가 최신 문법, 기술을 지원하지 않기 때문에 보여지는 모습이

환경에 따라 달라지는 크로스브라우징 이슈 가 발생할 수 있다.

바벨은 이러한 이슈를 해결하기 위해 생겨났으며, ES6+ 자바스크립트나, 타입스크립트, JSX 등이

모든 브라우저에서 똑같이 동작할 수 있도록 추상화 수준을 유지한 채로 코드를 변환시키는 역할을 한다.

💡 컴파일러(Compiler)
컴퓨터는 0과 1로만 이루어져 있는 기계어만을 해석할 수 있다.
하지만, 개발자들은 사람이 이해하기 쉽도록 추상화가 된 프로그래밍 언어 를 사용한다.
컴파일러 는 개발자들이 작성한 코드를 컴퓨터가 해석할 수 있도록 변환해주는 역할을 한다.

💡 트랜스파일러(Transpiler)
컴파일러의 하위 분류로써, 언어를 변환해 준다는 점은 컴파일러와 동일하지만
완전히 다른 두 언어가 아닌 유사한 두 언어 사이에서의 변환을 담당한다.

Babel 동작순서 ✏️

1. Parsing (파싱)

소스코드를 분석해 AST(Abstract Syntax Tree) 로 변환한다.

💡AST (Abstract Syntax Tree, 추상구문트리)
컴파일러에서 자료 구조로 사용되며 컴파일러의 구문 분석(parsing) 단계의 트리로 표현된 결과물이다. @babel/parser 의 parse 함수를 사용해 AWT로 파싱할 수 있다.
ex) https://astexplorer.net/

2. Transformation (변환)

위에서 만들어진 AST를 브라우저가 지원하는 문법으로 변환한다.

이 단계에서 plugin 또는 Preset(plugin 배열) 에 의해 관리되는데
이때 사용되는 plugin들은 @babel/traverse 를 사용해 AST를 순회한다.
순회하는 과정에서 AST 노드들은 브라우저가 지원하는 노드로 변경된다.

💡 Plugin & Preset
바벨이 어떤 코드를 어떻게 변환할지에 대한 규칙을 나타낸 것을 plugin 이라고 하며 plugin들을 목적에 따라 세트로 묶어놓은 것을 Preset 이라고 한다.

3. Code Generation (코드생성)

변환된 AST를 바탕으로 새로운 코드를 생성한다.

Pollyfill(폴리필) 😎

폴리필은 최신 ESMAScript 환경을 만들기 위해 코드가 실행되는 환경(브라우저)에 빌트인 & 메소드 등을 추가 해주는 역할을 한다.

예를들어보자

ES6 문법에서 비동기 처리를 위해 등장한 Promise 객체 는 env 프리셋으로 변환 하더라도 IE 에서 인식하지 못한다.
바벨의 경우 ES6+를 ES5로 변환할 수 있는 것만 변환하게 되는데, Promise는 변환할 수 있는 대상이 없기 때문이다.

이러한 경우에 폴리필을 통해 이슈를 해결할 수 있다.

Promise를 ES5로 변환할 수 없지만 ES5 방식으로 구현하여 해결하는 것이다.

// babel.config.js:
module.exports = {
  presets: [
    [
      "@babel/preset-env",
      {
        useBuiltIns: "usage", // 폴리필 사용 방식 지정
        corejs: {
          // 폴리필 버전 지정
          version: 2,
        },
      },
    ],
  ],
}

바벨 설정 파일에 useBuiltIns 옵션으로 어떤 방식으로 폴리필을 사용할지 지정해주면 된다.

웹팩으로 통합 ⭐️

실무에서는 바벨을 직접 사용하는 경우보다 웹팩으로 통합해서 사용하는 경우가 더 많다.

웹팩의 로더에서 babel-loader를 사용하면 간편하게 사용할 수 있다.

NextJs에서의 활용 😎

프론트엔드에서 많이 사용하는 Next.js 에서의 활용법을 찾아보았다.
기본적으로 Next는 next/babel preset을 포함하고 있어 React 와 서버사이드 코드 를 컴파일하는데 필요한 모든 것이 들어있다.

Next.js includes the next/babel preset to your app, which includes everything needed to compile React applications and server-side code.
Next.js Babel 공식

Babel Config 커스텀하기

프로젝트의 root 경로에 .babelrc. or babel.config. 파일을 생성해 확장할 수 있다.
구성 파일일의 preset에는 next/babel preset을 필수로 설정해주어야 한다.

{
	"presets": ["next/babel", {
      "preset-env": false // 꼭 false 로 설정해주어야 한다.
    }],
	"plugins": [],
}

preset-env이 true가 되면 웹팩 코드 스플리팅이 해제된다.
이후 원하는 preset이나 plugin을 배열 안에 추가하면 된다.

Next.js 컴파일러

Next.js 는 12버전부터 SWC 를 사용해 Rust로 작성된 컴파일러를 기본으로 활성화한다.

이는 기존 바벨보다 더빠르고 효율적이지만

기존 사용하던 바벨 구성이 있거나 Next.js 컴파일러가 지원하지 않는 기능이 있다면 커스텀하게 추가해주어야 한다.

참고
@suyeon9456
https://devowen.com/293
https://jeonghwan-kim.github.io/series/2019/12/22/frontend-dev-env-babel.html