성장에 목마른 코린이

[Node.js] Babel을 통해 ES5 -> ES6 사용하기 with nodemon 본문

Javascript/Node.js

[Node.js] Babel을 통해 ES5 -> ES6 사용하기 with nodemon

성장하는 코린이 2022. 11. 23. 15:50
728x90

babel은 ECMA script 2015+ 코드를

현재 및 이전 브라우저 또는 환경에서 호환 가능한 버전의 javascript 문법으로 바꿔주는 툴 체인입니다.

1. Babel 설치

$ npm i -D @babel/core @babel/node @babel/preset-env

프로젝트의 루트 디렉토리에서 위 명령으로 babel/core,babel/node,babel/preset-env를 설치해 줍니다. 

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

2. .babelrc 생성하기

프로젝트 루트 디렉토리에 .babelrc 파일을 생성하고 아래와 같이 내용을 작성해 줍니다.

이 파일은 babel의 설정 정보를 담고 있습니다.

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

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

3. package.json 수정하기

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

"scripts": {
    "start": "nodemon index.js --exec babel-node"
}

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

 

Comments