[NODE] 🛠️ 바벨(Babel) 설치 & 사용법

바벨(Babel)

웹 코딩을 할 때 가장 까다로운 것 중 하나가 웹 표준의 하위호환성을 맞추는 것이다.

​html이나 자바스크립트 코드에 최신 기술들만 쓰면 구식 브라우저에서 작동하지 않을 확률이 크고, 그렇다고 죄다 구닥다리 코드를 쓰자 하면 또 불편하고 찝찝해진다.

​

이것을 해결하기 위해 나온 것이 바로 바벨이라는 툴이다.

이 툴은 자바스크립트의 코드를 구버전에 맞게끔 변환시켜주는 역할을 한다.

 

이러한 행동을 트랜스파일링 이라고 불리운다.

---

BABEL PACKAGE  설치

프로젝트에 따라 설정이 다를 수 있으므로 전역으로 설치하지 말고 로컬로 설치하도록 하자.

npm install --save-dev @babel/core @babel/cli @babel/node @babel/preset-env

@babel/core : 바벨의 코어 패키지
@babel/cli :커맨드라인에서 파일을 컴파일하게 해주는 CLI 제공
@babel/node : 코드의 변환과 node 실행을 같이 하는 패키지
@babel/preset-env : Babel플러그인을 모아둔 것으로 Babel프리셋이라고 부르며 공식 프리셋은 다음과 같다.
    @babel/preset-env
    @babel/preset-flow
    @babel/preset-react
    @babel/preset-typescript

 

babel presets 설정

"presets": ["@babel/env"]를 package.json에 추가한다.

// package.json

{
  ...
  "devDependencies": {
    "@babel/cli": "^7.10.4",
    "@babel/core": "^7.10.4",
    "@babel/node": "^7.10.4",
    "@babel/preset-env": "^7.10.4"
  },
  "babel": {
    "presets": ["@babel/env"]
  },
  ...
}

 

babel.config.json 설정

프로젝트 루트폴더에 babel.config.json 을 생성하고 해당 내용을 작성한다.

targets 를 살펴보면 edge, firefox, chrome, safari 등 브라우저 리스트가 있다. 여기에는 현재 웹어플리케이션이 지원할 브라우저목록을 작성하면 된다.

{
   "preset" : [
       "@babel/env",
       {
           "targets": {
               "edge" : "17",
               "firefox" : "60",
               "chrome" : "67",
               "safari" : "11.1",
           },
           "useBuitIns": "usage",
           "corejs" : "3.6.4"
       }
   ]
}

 

babel 실행

아래의 명령어를 입력하면 dist.js파일로 변환되어 저장된다. 

--out-file 키워드를 사용하지 않는다면 따로 저장되지 않고 콘솔에 나타난다.

> npx babel [파일] --out-file [변환후파일]

> npx babel src/code.js --out-file dist.js