자바스크립트 바벨 이용 es6 → es5

Babel · The compiler for next generation JavaScript

바벨을 쓰는 이유는 

최신 버전의 자바 스크립트가 실행되지 않는 구버전의 브라우저들에서 실행시키기 위해

자바 스크립트를 바벨을 이용해서 변환을 해준다.

 

역시 nodejs를 설치 해야 한다.

 

초기화

terminal -> npm init -y 

-y는 자동으로 yes

package.json 파일을 만들어줌

 

babel-cli 설치

npm install --save-dev babel-cli

npm install -g babel-cli

-g 옵션으로 글로벌 설치 ( 매번 바벨을 설치할 필요 없이 공용으로 사용함 )

--save-dev 각 프로젝트마다 다른 babel을 사용하는 경우

바벨 cli는 바벨을 터미널 창에서 사용할 수 있게 해준다.

 

package.json 파일 수정

"scripts": { "build": "babel ./js -d ./es5 -w" },

 

./js -d 여기 위치의 파일을 변환해서 

./es5 -w 여기 위치에 es5란 폴더을 생성하고 변환된 파일을 만들어 준다. 

이런 의미이다.

위 사진에서 scripts 부분을 수정

이제 실행을 해보자

terminal에서

 

npm run build

이렇게 하면 아무 설정을 해주지 않아 파일이 복제만 되었다.

 

그래서

.babelrc 파일을 만든다.

{

"presets": [],

"plugins": []

}

 

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

terminal에서

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

 

설치를 했으면 프리셋 부분을 수정해준다.

"presets": ["es2015"]

 

 

그리고 다시 

npm run build

 

es5 파일이 생기고 안에 코드를 보면 es5로 바뀐 것을 알 수 있다.