Node.js - Express와 Babel 그리고 Nodemon

Express를 이용해 서버를 만들어보고 있습니다. Node.js를 이용해서 진행 중인데, ES6문법으로 작성을 하고 있습니다. 하지만 모듈 운용 방식은 CommonJS를 따르고 있어 ES6에서 제시하는 모듈 운용인 import와 export를 사용하지 못하고 있었습니다. 이를 해결해보고자 지난 글에서 진행 중인 프로젝트의 복사본을 초기 설정 때로 되돌려 보았습니다.

 

이번 글에서는 import와 export를 NodeJS에서도 사용 가능하게 하는 방법에 대해서 작성하고자 합니다.

 

아래는 제가 작성한 서버 초기 설정 프로젝트입니다. 완벽하진 않지만 수정을 해서 사용하시면 빠르게 시작하실 수 있을 것 같습니다.

 

https://github.com/dorakang612/learn_express_setting

dorakang612/learn_express_setting

 

방법은 크게 두 가지가 있습니다. 

 

1. Node에 옵션 주기

2. Babel 사용

 

---

# Node에 옵션 주기

 

해당 방법은 Node.JS에서 차차 모듈 운용방식을 ES6이상의 방법으로 바꿔가기 전에 사용하도록 하는 방법입니다. 프로젝트 내에 존재하는 package.json를 조금 수정해주시면 됩니다.

 

package.json

{
  "name": "proj",
  "version": "1.0.0",
  "description": "",
  "type": "module",
  "main": "index.js",
  "scripts": {
    "start": "node --experimental-modules .",
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

 

type을 module로 주시고, node를 실행 시 --experimental-modules라는 옵션을 주는 것입니다.

보시면 알수 있듯 실험적인 방법입니다.

 

추가로, type을 module로 주지 않고 파일의 확장자들을 .js에서 .mjs로 바꿔주는 방법도 존재합니다. 

 

 

---

# Babel사용

 

Node는 CommonJS를 기반으로 한다고 말씀드렸었습니다. 그렇다면 ES6로 작성한 파일을 Node가 알아들을 수 있게 변환을 해준다면 실행 가능할 것입니다. 여기서 변환을 해주는 역할을 Babel이 담당합니다.

 

Babel의 공식 페이지를 방문한다면 Babel을 JavaScript Compiler이며, 최신의 JavaScript를 사용하라고 말해주고 있습니다. Babel은 우리가 ES6이상의 문법으로 작성한 코드를 Node 혹은 목표로 삼는 브라우저에 맞는 최신 자바스크립트로 변환을 해서 실행할 수 있게 도와줍니다.

 

babel의 사용방법을 알아보겠습니다.

 

1. 필요한 모듈들을 설치합니다.

 

>npm i --save-dev @babel/cli @babel/core @babel/preset-env @babel/node

 

• --save-dev : 설치 옵션으로 설치 모듈들을 devDependencies에 추가합니다.

• @babel/cli : 명령 프롬프트 창(터미널)에서 babel을 쓸 수 있게 합니다.

• @babel/core : babel의 주요 기능들을 담고 있는 모듈입니다.

• @babel/preset-env : 타깃 브라우저를 입력한 경우 해당 브라우저 환경에 맞게 자동으로 최신 JavaScript문법을 사용할 수 있게 합니다. 타깃이 지정되지 않는 경우 ECMAScript2015+ 코드로 기본적으로 변환됩니다.

• @babel/node : @babel/cli에서 독립된 모듈로, Node.js CLI와 같은 방식으로 동작합니다. 하지만 추가적으로 Node.js에서 실행 전 바벨의 설정들과 플러그인들을 고려하여 컴파일링을 해주는 기능이 추가되어 있습니다. 배포용으로는 권장되지 않고 있습니다. 크기가 꽤 크며, 메모리 사용량이 상당하기 때문입니다.

 

2. 바벨의 설정 파일을 생성합니다.

 

루트 디렉터리에 ".babelrc"라는 파일을 생성합니다. .gitignore 파일을 생성하듯 "."을 꼭 입력해주셔야 합니다.

 

저는 presets 이외에 설정을 하지 않을 것이기에 아래와 같이 간단히 작성했습니다.

 

.babelrc

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

 

위처럼 바벨 설정을 따로 만들어서 관리하면 추후 프로젝트가 커졌을 때 관리하기 수월합니다. 하지만 간단히 사용하고자 하는 경우 package.json파일에 babel 설정을 추가하여 사용할 수도 있습니다.

 

package.json

 

{
  ...
  "dependencies" : {
    ...
  },
  "devDependencies" : {
    ...
  },
  "babel" : {
    "presets" : ["@babel/preset-env"]
  }
}

 

3. pacage.json의 scripts 추가하기

 

{
  ...
   "scripts": {
    "build": "babel src -d dist",
    "start": "npm run build && node dist/app.js",
    "start:dev": "nodemon --exec babel-node src/app.js"
  },
  ...
}

 

일반적으로 실행을 할 때 "npm start"를 커맨드 창에 입력하면 먼저 "build" : " babel src -d dist"를 실행합니다.

 

• ["build": "babel src -d dist" ] : src 디렉터리에 있는 파일들을 변환하여 dist라는 디렉터리에 저장하라는 의미입니다. -d는 out-dir의 축약어입니다.

• ["start" : "npm run build && node dist/app.js"] : build script를 실행하고, dist/app.js를 실행합니다.

• ["start:dev" : "nodemon --exec babel-node src/app.js"] : nodemon은 파일에 수정사항이 생기면 자동으로 재시작하도록 유도합니다. --exec은 nodemon의 옵션으로 뒤에 나오는 script를 수행하도록 합니다. babel-node src/app.js는 src 디렉터리의 app.js를 변환 후 실행시킵니다.

4. 실행하기

npm run start:dev

실행 후 코드를 수정하면 nodemon에 의해 자동으로 재시작됩니다.

 

npm start

start를 실행하면 루트 디렉터리에 dist 폴더가 생성되고, src에 있던 파일들이 변환되어 저장됩니다. 저장된 파일 중 app.js가 실행됩니다. nodemon을 적용하지 않았기 때문에 코드를 수정하면 서버를 종료한 뒤 다시 실행시켜줍니다.

 

 

---

# 참고 자료

https://babeljs.io/

Babel · The compiler for next generation JavaScript

 

https://www.daleseo.com/js-babel-node/

NodeJS로 ES6 코드 실행하기

 

https://github.com/babel/example-node-server

babel/example-node-server

 

https://mwoo526.tistory.com/32

Node.js - Babel

 

https://blusky10.tistory.com/282

npm install --save --save-dev