[Javascript] Babel: 자바스크립트 버전 변환 툴

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

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

이것을 해결하기 위해 나온 것이 바로 바벨이라는 툴이다.
이 툴은 자바스크립트의 코드를 구버전에 맞게끔 변환시켜주는 역할을 한다.

일단 깔아보자
먼저 npm이라는 패키지 매니저가 있어야 하는데, 이건 node.js를 깔면 자동으로 딸려온다.
없으면 노드를 먼저 깔아주자.
https://nodejs.org/en/

깔았으면 이렇게 바벨이란 놈을 전역에 깔아준다.

바벨-cli라는 것도 깔아준다. 이거 없으면 안돈다.

대충 자바스크립트 코드를 작성한다.
이건 ES6 문법을 따라 작성되었다.

그리고 저걸 단순하게 인자로 보내면

이렇게 파싱해서 그대로 보여준다.
에러가 있으면 에러도 잡아서 보여준다.

근데 사실 이걸로는 제대로 변환이 안된다.
변환을 위한 모듈을 또 깔아줘야 하는데... 그게 babel-preset-env라는 놈이다.
예전에는 이마저도 버전별로 모듈이 따로 있었는데, 통합된거라고 한다.

이건 프로젝트별로 설정이 달라야하니까 전역으로 깔면 안된다.
지역으로 깔아서 해당 디렉터리에 node_modules 디렉터리가 깔려야만 인식이 된다.

이제 아까처럼 바벨에 소스파일을 전달하되, --presets 플래그를 줘보자.

그럼 옛날 스타일대로 잘 바뀐다.

이제 이걸 파일로 출력하려면,
--out-file 파일명
의 형태로 플래그를 더 넣어주면 된다.

잘 된다.