Babel 사용하기

뭔가 오랜만에 자바스크립트를 공부하려니 많이 바뀐듯 하다. 2014년도엔(라떼는) 이렇지 않았는데,,, 다시 2020년부터 개발자로 돌아오게 되니 스프링도 스프링 부트로 개발이 주류를 이룬듯 하고,, 자바스크립트 문법도 많이 바뀌었다. 그중에서 babel이란 놈이 많이 쓰이는것 같은데 간단한 사용법을 알아본다.

 

babel : 자바스크립트 컴파일러

 

최신 버전의 자바스크립트로 개발을 하고 이걸 배포할때 예전 방식의 자바스크립트 파일로 변환해서 배포하기 위해 사용.

 

babel을 사용하기 위해서는 nodejs를 설치하여야 한다. 

nodejs.org/en/

Node.js

왜냐하면 여기서 제공하는 npm(node package module)을 사용하여야 하기 때문이다. 

 

$ npm init -y

$ npm install --save-dev babel-cli

 

 

package.json 설정

"scripts": {

    "babel": "babel ./public/src -d ./public/lib -w"

},

 

ECMA 2015 preset을 사용하기 위해 해당 preset을 설치

npm install --save-dev babel-preset-es2015

 

.babelrc 파일 생성

{

    "presets":["es2015"]

}

 

그 후에 npm run build를 수행해 보면! src폴더에 있던 신버전의 js 파일들이 lib폴더에 구버전 js파일로 변환되는 것을 확인할 수 있다.