babel

소개

Ecma Script

  앞으로 작성할 JS 코드는 ES(Ecma Script)6+다. ES는 JS의 문법을 설명하는 specification이다. ES를 살펴보면 JS 문법에 이것이 추가되었고 수정되었고 deprecated 되었다라는 것을 명시한다. 개발자는 ES를 보고 그에 따라 JS 코드를 작성할 수가 있다. 하지만 개발자가 ES6+(번호는 버전을 뜻한다.)대로 개발을 하게 되면 브라우저는 코드를 인식하지 못 한다. 이것을 해결하는 도구가 babel이다. (왜 이해하지 못 하는 이유를 알고 싶다면 브라우저 전쟁을 알아야 한다. 하지만 이 부분은 생략하겠다. 밑에 링크를 달아둘테니 브라우저 전쟁을 잘 설명해주시는 엘리님의 설명을 들으면 된다.)

Babel

  Babel은 ES6+로 작성된 JS 코드를 하위 호환(backwards compatible)이 될 수 있도록 도와주는 free and open-source JS transcompiler다. 덕분에 개발자가 ES6+로 코드를 작성해도 babel이 이것을 이해하지 못 하는 브라우저들이 이것을 이해할 수 있는 코드를 바꿔준다.

설치

• @babel/node : babel-node는 Node.js CLI와 정확히 동일하게 작동하는 CLI로, 실행하기 전에 Babel 사전 설정 및 플러그인으로 컴파일할 수 있는 부가적인 이점이 있다.

• @babel/cli : @babel/cli는 터미널에서 바벨을 사용할 수 있는 도구다.

• @bable/preset-env : babel이 최신 JS를 변환시킬 수 있도록 도와주는 사전 설정 prset이다. .babelrc라는 파일을 만들고 그 안에 설정 JSON형태로 설정을 해주면 된다.

  package.json에서 "start":"node init.js"를 "start" : "babel-node init.js"로 바꿨다. 이로 인해 전에 사용하지 못 했던 ES6+문법(import 등)을 사용할 수 있게 되었다.

@babel/node 설정

  @babel/preset-env의 설정을 위해 .babelrc라는 파일을 만들고 다음과 같이 JSON 파일을 작성한다.

.babelrc

 

• @babel/core : babel을 실행시키기 위해 꼭 필요하다. 바벨의 핵심 기능을 담고 있다.

• @babel/polyfill : polyfill은 개발자가 특정 기능이 지원되지 않는 브라우저를 위해 사용할 수 있는 코드 조각이나 플러그인을 말한다. promise나 async & await, map 등 새로 생긴 기능은 이전 ES 문법으로 대체할 수가 없다. 이러한 부분을 해결하는 것이 polyfill이다.

 

참고 자료

• 드림코딩 엘리 - 브라우저 전쟁
• babel 사이트
• @babel/node
• @babel/cli
• @babel/preset-env
• @babel/core
• @babel/polyfill

 

소스 코드

https://github.com/zpskek/wetube-v3/commit/ca20b1e83a2ed637124175000e355524189a882e