자바스크립트 엔진 버전 간 호환되게 해주는 플러그인, 바벨

바벨

 

컴파일은 프로그래밍 코드를 컴퓨터가 알 수 있는 코드로 바꾸어 주는 일.

 

트랜스파일은 프로그래밍 코드 -> 프로그래밍 코드

 

예를 들어 자바 -> 파이썬 등..

 

 

전반적으로 웹브라우저가 쓰는 자바스크립트 버전은 ES5이다.

 

바벨은 최신 자바스크립트 버전으로 짜여진 코드들(for of 이런거 ES6 버전임)을 ES5로 트랜스파일 해주는 플러그인이다.

 

당연히 런타임 말고 devDependencies의 플러그인이다.

 

설치 : npm i -D @babel/core @babel/preset-env

 

그 후

.babelrc.js

이 파일을 새로 만들고 여기다 자바스크립트언어로 설정해 주면 된다.

 

참고로 rc는 설정, 혹은 구성 파일이다.

 

또한 이런 설정 파일들은 앞에 .을 붙인다.

 

ex) .postcssrc.js

 

그 후

module.exports = {

  presets : [

    "@babel/preset-env"

  ]

}

 

 

바벨 설치할 때 @babel/core @babel/preset-env 이렇게 두개 설치했는데 설명을 하자면,

@babel/node : node.js 커맨드 라인에서 사용하는 명령어를 사용할 수 있게 해준다.

@babel/core : 바벨의 핵심기능이 담긴 기본 라이브러리

@babel.cli : 커맨드 라인에서 바벨 실행할 수 있게 해줌. (https://ko.parceljs.org/cli.html)

 

@babel/preset- : ESNext코드를 컴파일 해주는 플러그인 모음 설치

@babel/preset-env : 기본 js 코드 검사

@babel/preset-flow : 플로우 코드 검사

@babel/preset-typescript : 타입스크립트 코드 검사

@babel/preset-react : 리액트 코드 검사