[babel] Node.js에서 ES6 문법 사용하기

0. Babel?

babel은 ECMA script 2015+ 코드를 현재 및 이전 브라우저 또는 환경에서 호환 가능한 버전의 javascript 문법으로 바꿔주는 툴 체인이다.

개발을 진행하다보면 ES6+ 에서 지원하는 Arrow function 이나 import 구문, Object.assign등 자주 쓰이지만 이 메소드나 객체들은 Node.js 에서 아무 설정없이는 아래 사진처럼 에러를 내며 사용할 수 없다. 그래서 항상 프로젝트 시작시에 필수적으로 추가해주는 모듈 중 하나이다.

---

1. Babel 설치

$ npm install @babel/core @babel/node @babel/preset-env --save-dev

프로젝트의 루트 디렉토리에서 위 명령으로 babel/core,babel/node,babel/preset-env를 설치해 준다. 예전에는 babel/polyfill 까지 같이 설치해 줬어야 했어서 상당히 헷갈렸던 기억이 있는데 Babel 7.4.0 버전부터 babel/polyfill은 babel/node 에 포함 되어졌다고 한다.

babel/core는 babel을 사용하기 위한 필수 패키지, babel/node는 코드의 변환과 실행을 한번해 할 수 있게 하기 위해, babel/preset-env는 여러 플러그인이나 프리셋을 사용하기 위해 설치한다.

---

2. .babelrc 생성하기

프로젝트 루트 디렉토리에 .babelrc 파일을 생성하고 아래와 같이 내용을 작성해 준다. 이 파일은 babel의 설정 정보를 담고 있다.

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

이 파일에 설정을 조금씩 추가해 주면서 지원하는 않는 구문, 문법, 객체등을 계속 추가하면서 사용할 수 있다.

---

3. package.json 수정하기

앞서 babel/node를 통해 변환하고 실행하는 과정을 한번에 하기 위해 설치한다고 했는데, 이를 npm start 명령이 실행될 때 자동으로 실행되도록 수정한다.

프로젝트 루트 디렉토리 package.json 파일의 script/start 부분을 아래와 같이 수정했다.

"start" : "nodemon ./bin/www --exec babel-node"

기존 nodemon으로 실행하는 명령 뒤에 --exec babel-node를 붙여주면 된다.

---

4. 결과 확인

결과를 확인하기 위해 express로 생성된 프로젝트에 import구문을 추가해 보았다.

첫 번째 사진의 에러는 해결되고 npm start 명령을 통해 잘 실행되는 것을 확인할 수 있었다.

---

참고

babel
babel/pollyfill