[Node] babel이란? babel 설치 및 설정하는 방법

[Node] babel이란? babel 설치 및 설정하는 방법

Babel, 바벨

Babel이 무엇일까? Babel은 JavaScript compiler이다. 그럼 Babel을 왜 사용하는 것일까? 우리는 node에서 Javascript를 작성하여 동작을 시킬 것이다. 그러나 node가 Javascript의 모든 최신 문법을 이해하는 것은 아니다. 이때 우리가 작성하는 최신 문법은 구 문법으로 변경하여 node가 이해할 수 있도록 도와주는 것이다. 즉, 우리가 작성한 최신 문법을 이전 문법으로 변경해준다고 생각하면 된다.

Babel 설치 및 설정하기

babel을 설치하고 설정하는 방법은 매우 간단하다. 아래 명령어를 입력해주자.

명령어 : npm install --save-dev @babel/core @babel/node @babel/preset-env

위 명령어를 실행하면 모든 설치가 완료된다. 그 다음 작성해 주어야 파일이 있다. babel.config.json 파일을 package.json과 동일 선상 위치에 생성한 뒤 아래 코드를 작성해주자.

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

그리고 마지막으로 package.json의 script 부분을 변경해주어야 한다. 필자의 경우 비교를 하기 위해, babel-node를 사용하여 실행한 것과 그냥 node를 실행한 것 2개를 생성해주었다. package.json에 아래 코드를 추가해주자. 이해를 돕기 위해 전체 이미지도 첨부한다.

"scripts": {
  "start": "node index.js",
  "start:dev": "babel-node index.js"
}

위 script 코드를 간단하게 설명하자면, npm run start를 하게 되면 node로 index.js 파일을 실행시키는 것이고, npm run start:dev를 하게 되면 babel-node로 index.js 파일을 실행시키는 것이다. 이제 babel을 사용하면 어떤 일이 일어나는 지 확인해보기 위해 node에서는 이해하지 못 하는 최신 문법 import를 사용하여 node와 babel-node로 실행을 해보자.

1. npm run start

에러 발생, 즉 import라는 문법을 이해하지 못 해 실행이 되지 않는다. 그럼 babel-node를 사용하면 어떻게 될까?

 

2. npm run start:dev

에러가 발생하지 않고 정상적으로 실행이 된다. 즉 babel이 import 구문을 require로 변경해주었기 때문이다.

정리하자면 babel을 사용하는 이유는 최신 문법을 node가 이해할 수 있는 이전(옛날) 문법으로 변경해주기 때문이다.

마지막

해당 내용은 틀릴 수도 있다는 것을 감안하여 봐주세요. 틀린 내용 및 오탈자 수정 요청 환영입니다.