Babel (compiler, plugin, preset)

YeongMin·2022년 5월 6일
babelpluginpreset
1

babel

목록 보기
1/1
post-thumbnail

1. 바벨이란

현재 웹환경에서는 사용자가 사용하는 브라우저도 다양하고 개발자들이 사용하는 언어, 문법 또한 여러 버전이 존재한다.
즉 개발자가 작성한 코드를 사용자가 사용하는 브라우저가 지원하지 않는 상황도 발생할 수 있다.

작성된 코드가 여러 브라우저에서 정상적으로 동작할 수 있게 만드는 행위 를 크라스 브라우징을 지원하게 만든다. 라고 한다.

즉 바벨은 크로스 브라우징을 지원하기 위한 목적으로 브라우저가 해석할 수 있는 언어의 버전으로 컴파일하는 역활을 가지고 있다.
대표적인 예로는 ES6 를 ES5 로 변환하거나 JSX 또는 TS 를 js 로 동작하게 하는 것이 존재한다.

바벨은 컴파일, 트랜스파일?

바벨을 컴파일러가 아닌 트랜스파일러라고 지칭한 포스트들도 존재한다.
Babel 공식 홈페이지에서는 Babel is JavaScript compiler 라고 나와있음으로 필자는 컴파일러라고 지칭하며, 넓은 범위로는 트랜스파일 또한 컴파일이라고 지칭한다고 한다.


2. 바벨의 빌드 3단계

  1. 파싱(Parsing): 코드를 읽고 추상 구문 트리(AST)로 변환하는 단계

  2. 변환(Transforming) : 추상 구문 트리(AST)를 변환하는 단계, 실제로 코드를 변경하는 작업

  3. 출력(Printing): 변경된 결과물을 '출력'한다. 이 단계를 마지막으로 바벨이 작업을 완료

즉 바벨은 파싱단계 에서 AST를 구축하고 변환단계 에서 구축된 AST를 지정한 플러그인을 통해 탐색하여 AST를 변경하고 출력단계 에서 변경이 완료된 AST를 통해 새로운 코드를 생성한다.


3. 플러그인

바벨은 파싱, 출력 단계만을 담당하게 되고 변환단계는 플러그인이 담당하게 된다.
즉 플러그인은 어떤 코드를 어떠한 방식으로 어떻게 변환할지에 대한 규칙을 나타낸다.
바벨 플러그인을 커스텀하는 것 또한 존재하며 바벨에서 지원해주는 플러그인도 존재한다.


4. 프리셋

실무 프로젝트에서는 앞서 말한 플러그인을 하나만 사용하는 것이 아니다.
그러나 플로그인을 하나하나 설치하기에는 매우 번거롭다.

즉 이러한 플러그인들을 목적에 맞게 묶어서 세트로 사용하는 것을 프리셋(preset) 이라고한다.

4-1. 바벨에서 자주 사용되는 프리셋

  • preset-env : ES6 => ES5 변환할 때 사용
  • preset-react : react를 변환한다.
  • preset-typescript : typescript를 변환한다.
  • preset-flow : flow를 변환한다. (flow)

    flow?
    간단히 말해 TypeScript와 유사한 JavaScript 타입을 체커이다.

5. 바벨 설치

npm i @babel/core @babel/cli @babel/preset-env
  • @babel/core : 핵심적인 동작이 담겨있는 바벨 코어
  • @babel/cli : 커맨드라인 명령어를 지원하기 위한 바벨 CLI
  • @babel/preset-env : es6 => es5 로 변환하는 플러그인들이 모인 프리셋

6. 바벨 설정

6-1. preset 적용하기

필자는 babel.config.js 파일을 루트폴더에 생성하여 적용하는 방식으로 진행하였다.

프리셋들이 들어가는 presets 라는 key 값을 가진 프로퍼티의 value 값으로 프리셋 명 과 target 이 담긴 배열을 할당해준다.

// babel.config.js

module.exports = {
  // preset 들이 담기는 곳
  presets: [
    [
      "@babel/preset-env",
      {
        targets: {
          chrome: "79",
          ie: "11"
        }
      }
    ]
  ]
}

6-2. 빌드 명령어 설정

  • package.json 파일의 scripts 에 새로운 커맨드 명령어를 작성
  • "babel src -d build" : babel을 이용하여 src 폴더의 파일을 build 폴더를 생성해 저장하겠다.
// package.json
{
  "name": "give_me_front",
  "version": "1.0.0",
  "description": "> Babel",
  "main": "index.js",
  "scripts": {
    "build": "babel src -d build"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@babel/cli": "^7.17.10",
    "@babel/core": "^7.17.10",
    "@babel/preset-env": "^7.17.10"
  }
}

7. babel 사용 결과

npm run build 를 터미널에 입력해 보겠다.

src/index.js

// src/index.js

const foo = [1, 2, 3, 4, 5];
const [one, ...list] = foo;

list.map(num => num + 1);
console.log(list)

build/index.js

// build/index.js

"use strict";

var foo = [1, 2, 3, 4, 5];
var one = foo[0],
    list = foo.slice(1);
list.map(function (num) {
  return num + 1;
});
console.log(list);

8. 참고

Can I Use : 브라우저가 지원하는 문법을 볼 수 있는 사이트
Babel 공식 : 바벨 공식 사이트
jakeseo님의 velog : 프론트엔드 개발 환경 공부 #9 바벨의 기본 개념 (플러그인, 프리셋, 폴리필)

잘못된 정보가 존재한다면 댓글로 알려주시면 감사하겠습니다 😔

profile
YeongMin
Front-End 안영민

0개의 댓글