Babel Nodemon

1. Babel

Node.js는 우리가 작성한 코드를 대체로 이해하지만, 이해하지 못하는 최신 코드가 생기기도 한다.

해결방법은 Node.js가 이해하는 JS만 사용하거나, Babel을 사용해야 한다.

Babel은 개발자가 작성한 최신 JS를 컴파일한다.

즉 개발자는 현재의 Node.js 버전이 JS를 인식하지 못하는지 걱정할 필요 없이 최신 JS를 작성할 수 있다.

 

2. 설치방법

https://babeljs.io/

Babel · Babel

npm install --save-dev @babel/core

 - dependencies는 프로젝트를 실행하기 위한 것임

 - 예로 자동차는 움직일 때 가솔린이나 전기가 필요한 것

 - devDependencies는 온전히 개발자를 위한 것임

 - 우리가 목적지로 갈 때 네비게이션은 필요는 하지만 필수는 아니라는 것

 - 고로 Babel은 개발자가 최신 문법의 코드를 사용하려면 필요한 것

 - npm install을 할 때 --save-dev를 뺀다면 dependencies에 Babel이 있음

   - 큰 문제는 아니며 실수로 그렇게 설치했어도 devDependencies로 위치를 바꾸면 상관없음

npm install @babel/preset-env --save-dev

 - babel.config.json이라는 파일을 만들면 Bable이 해당 파일을 탐색

 - preset은 Babel을 위한 플러그인이며 preset-env는 가장 유명하며 이 것을 사용해야 최신 JS 구문 사용이 가능

 

3. 사용법

# 공식적인 사용방법이 있지만 JS에서 직접 Babel을 사용하지 않고 package.json에 scripts를 작성

$ npm install @babel/core @babel/node --save-dev
# package.json
{
  "scripts": {
    "dev": "babel-node index.js"
  },
  "dependencies": {
    "express": "^4.21.1"
  },
  "devDependencies": {
    "@babel/core": "^7.25.8",
    "@babel/node": "^7.25.7",
    "@babel/preset-env": "^7.25.8"
  }
}

# index.js
import express from "express";
console.log("FFF");

$ npm run dev
FFF

# 코드를 수정할 때마다 run하는 것이 문제이므로 nodemon을 사용
# nodemon은 우리가 만든 파일이 수정되는지 감시하는 패키지

# Terminal
$ npm i nodemon --save-dev

# package.json
{
  "scripts": {
  	"dev": "nodemon --exec babel-node index.js"
  }
}

# Terminal
$ npm run dev

코드가 수정될 때마다 서버가 재시작

 - 주의해야 할 점은 현재 node로 실행하는 것이 아닌 babel-node로 실행하고 있음