<Express.js> Babel

Babel 이란?

babel은 ECMAScript2015+의 최신 javascript code를 브라우저가 이해가능한 표준 javascript code로 변환해줍니다. 변환 예시는 아래와 같습니다.

이런 역할을 하는게 Babel 이라고 생각하시면 됩니다.

Babel 설치

프로젝트 경로에서
%npm install @babel/node를 터미널에 입력
%npm install @babel/core를 터미널에 입력

pesets

Babel에는 많은 설정들이 있는데요. 실험적인 것도 있고 다양합니다. 우리가 사용할 preset은 -env입니다. 가장 최신이지만 실험적인 것 까진 아닌것이라고 생각하면 됩니다.
%npm install @babel/preset-env를 터미널에 입력
preset-env docs 링크

project

youtube
 *|package.json
  |index.js
 +|.babelrc

.babelrc

Babel이 동작하기 전에 .baelrc 파일에서 설정을 체크게 되므로 .babelrc 파일을 생성해야 합니다. 아래의 단계를 따라합니다.

• 프로젝트 폴더에 .babelrc 파일 생성
• .babelrc파일에 아래 내용 작성

{
  "pesets":["@babel/preset-env"]
}

package.json

package.json에서는 scripts를 수정하여 개발에 편의성을 더하겠습니다.

/*{
  "scripts":{
    "start":"node index.js"
  }
}
*/
{
  "scripts":{
    "start":"babel-node index.js"
  }
}

node가 루트파일을 바로 실행하지 않고 babel을 통해 표준 자바스크립트 코드로 변환한 후 실행한다는 뜻입니다.