$ npm i -D nodemon
$ npm i -D @babel/core
$ npm i -D @babel/node
$ npm i -D @babel/preset-env
i 는 install의, -D 는 --save-dev의 shortcut이다.
--save-dev
: 서버를 만드는데 꼭 필요한 요소는 아니지만, 개발을 편리하게 해주는 패키지들을 package.json의 devDependencies에 정리해주는 옵션이다.
한번에 설치하려면 아래 같이 띄어쓰기로 구분하여 한줄로 작성하면 된다.
npm i -D nodemon @babel/core @babel/node @babel/preset-env
개발할 때 파일이 수정되는 걸 감지해 알아서 재시작해주는 패키지이다. 이것이 없으면 파일을 수정할 때마다 변경사항을 확인하기 위해 서버를 매번 재시작해야한다.
우리가 작성한 최신 JS문법을 nodeJS가 이해할 수 있는 문법으로 바꿔주는 자바스크립트 컴파일러이다.
@babel/node: 코드의 transpile과 실행을 한꺼번에 처리하기 위한 명령어(babel-node
)를 사용할 수 있도록 한다.
@babel/cli : 터미널에서 babel
명령어로 최신 JS문법을 호환성 좋게 transpile 할 수 있다. 이때 플러그인과 함께 사용하여 어떤 식으로 transpile할 건지 설정할 수 있다.
babel-node
명령어와 달리 transpile을 할 뿐 그 파일을 실행시켜주지는 않는다.
@babel/preset-env : 바벨의 플러그인 중 하나
@babel/core : 바벨 컴파일러의 코어
"scripts": {
"start": "node build/init.js",
"build": "babel src -d build",
"dev": "nodemon --exec babel-node src/init.js"
},
터미널에서 npm run <script key>
로 해당 key에 정의된 value를 명령어로 실행시킬 수 있다.
$ npm run dev
$ npm run build
$ npm run start = npm start (예외적)
위에서 작성한 스크립트를 설명하자면 아래와 같다.
node build/init.js
: build 폴더에 있는 init.js 실행
→ 프로젝트를 배포버전으로 실행시키기위해 사용한다.
babel src -d build
: src 폴더에 있는 파일들을 babel로 transpile하여 그 결과물을 build 폴더에 생성
→ 프로젝트를 빌드하는데 사용한다.
nodemon --exec babel-node src/init.js
: src폴더에 있는 init.js를 babel-node로 transpile하고 실행. 파일 수정시 알아서 재시작 되도록 nodemon 설정
→ 프로젝트를 개발 모드로 키고 싶을 때 사용한다.
root 디렉터리에 babel.config.json 파일을 만들고 아래 코드를 적어준다.
{
"presets": [
"@babel/preset-env"
]
}
이렇게 하면 babel과 nodemon을 이용한 NodeJS 설정이 완료된다.🥳🔥