Node.js 기본 세팅 - babel, .babelrc, nodemon

Babel

var http = require("http"); (과거)

import http from ‘http’; (ES6)

 

대개의 개발자들이 ES6 이상의 버전을 선호하지만 종종 컴퓨터가 못 알아듣는 경우가 많아서 syntax error가 날 경우가 많다. 특히 node의 경우 새로운 JS 문법을 못 알아 듣는다.

 

우선은 common js를 채택한 node이기 때문에 import/export도 안 먹는다.

 

그렇다면 과거의 것으로 바꿔쓰던가 Babel을 설치해주어야 한다.

(필자는 간단한 웹을 만들 때는 귀찮아서 그냥 옛날 문법으로 작성한다)

 

 

우선 package.json이 있는지 확인. 없다면

npm init

뭔가 이것저것 물어볼텐데 신경쓰고 싶은 것만 적고 다 패스하면된다.

package.json이 생겼을 것이다.다음 명령어를 실행해준다.

 

현재 노드환경에서 작업하려고 하는 것이기 때문에 @babel/node도 설치합니다.

npm install @babel/core //babel의 핵심을 설치합니다.
npm install @babel/preset-env //babel의 preset 중 env를 선택합니다.
npm install @babel/node //node에서 사용할 babel을 설치합니다.

react를 구성할 때도 위와 같이 babel을 설치하는데 그 때는 @babel/react를 설치합니다. 결론은, 기계적으로 위 코드를 위워서 입력하면 안된다는 겁니다. 이해를 합시다. babel 홈페이지에 가서 공식 문서를 읽어봅시다.

 

 

.babelrc 파일을 만든 후 다음 코드를 입력해주자

* babel에게 어떠한 정보를 전달해주지 않는 한 babel은 아무 작업도 수행하지 않으므로 babel에게 설정 정보를 전달해줘야 한다. 필자는 자주 까먹어서 cannot use import statement outside a module 오류를 많이 받았다. 

* preset-env가 무엇이냐면... => https://babeljs.io/docs/en/babel-preset-env

@babel/preset-env
 is a smart preset that allows you to use the latest JavaScript without needing to micromanage which syntax transforms (and optionally, browser polyfills) are needed by your target environment(s). 

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

// 원하는 프리셋을 적어주면 된다. 다음은 예시이다.
{
  "presets": ["@babel/preset-env", "@babel/preset-node"]
}

 

이 작업을 통해 presets를 preset-env로 설정하는 효과를 줄 수 있다.

 

이 작업까지 마쳤다면 babel이 통역을 할 수 있게 된다.

즉, 다음이 같은 표현으로 인정된다. (번역된다)

import express from "express";
const express = require("express");

 

그 다음에는 package.json에 가서 scripts 부분을 수정해주자.

start가 없다면 직접 만들어주면 된다.

 

"scripts": {
"start": "node index.js" // node 대신에
"start": "babel-node index.js" // babel-node를 사용하여 구동시켜주자
},

 

역시서 중요한 건 앞에 babel을 붙여주는 것. 바벨이 통역을 해야지.

이렇게 하면 ES6의 문법을 사용할 수 있다.

 

---

nodemon

변경사항이 있을 시 자동으로 서버를 껐다가 켜주는 nodemon을 설치해보자. (어디까지 개발용임. 배포시 pm2 적용)

npm install nodemon –D

-D는 dependencies가 아니라 devDependencies라 하여 구동할 때 필요한 것에 필요한 목록에 nodemon을 설치하라는 의미이다.

 

설치 이후 package.json에서도 수정해준다.

"start": "nodemon --exec babel-node index.js --delay 2"

그렇다면 npm start시 nodemon으로 구동이 되고 babel로 번역도 된다.

delay 2초를 준 이유는 babel이 번역할 시간을 주기 위함이다.

 

만약 nodemon의 세부 사항을 설정하고 싶다면 nodemon.json을 작성하자.

 

나는 js와 graphql 확장자를 가진 것을 감시하도록 설정해두었다.

// nodemon.json

{
  "ext": "js graphql"
}