npm - express 실행 & babel & devDependencies

express 실행

index.js에 아래 코드를 입력하면된다. (아래 코드보다 더 좋은 코드가 있다.)

더 좋은 코드를 알기위해서는 babel 이라는 것에 대해 알아야 한다.

const express = require("express"); const app = express();

 

---

Babel 설치하기

바벨은 최신 자바스크립트 코드를 nodeJS가 이해할 수 있는 안정된 자바스크립트 코드로 변환. nodeJS는 최신 자바스크립트 코드까지 이해하지 못하기 때문이다. nodeJS가 이해할 수 있는 언어인지 아닌지 구분해서 코드를 작성하기 보다는 작성 후 변환하는 것이 이득!

 

Babel · Babel

 

install

npm install --save-dev @babel/core

babel을 설치하면 package.json > *devDependencies에 기록되어 있다. node_module 폴더에도 babel폴더를 확인할 수 있다. babel은 devDependencies에 저장되어야 하기 때문에 명령어를 다르게 입력해줘야 한다. 만약 다른 곳에 저장했더라도 걱정 NO. (package.json은 단순히 텍스트 파일이기 때문에 옮겨주면 된다.)

 

create configuration file

1단계 : babel.config.json 파일 생성하기

touch babel.config.json  // 우클릭 파일 생성하기도 됨

2단계 : 생성된 babel.config.json  파일에 아래 내용 붙여넣기

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

3단계 : preset 설치하기

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

preset-env: 최신 자바스크립트로 작성할 수 있도록 도움을 주는 플러그인

 

 

*devDependencies

개발자에게만 필요한 dependencies를 기록해 둔 것.

Dependencies : 프로젝트에 필요한 패키지.
devDependencies : 개발자에게 필요한 패키지

 

---

Babel 실행하기

아래 코드를 입력해서 사용하면 된다. code부분에 최신 자바스크립트 코드를 입력하면 안정된 자바스크립트 코드(못생긴코드)가 생성된다. 하지만 이러한 코드를 직접 입력하지 않고 package.json의 scripts를 활용해서 babel를 실행할 것이다.

require("@babel/core").transform("code", {
presets: ["@babel/preset-env"],
});

 

 

1단계 : 'nodemon'을 활용하기 위한 셋팅

nodemon : 파일이 수정되는 것을 감시해주는 패키지이다. 파일이 수정되면 자동적으로 재시작을 해준다.

 

* babel/node 설치

npm install @babel/core @babel/node --save-dev   // babel/core가 이미 설치된 경우에도 복사 붙여넣기 가능.

* package.json > scripts 추가

"scripts": { "dev": "babel-node index.js" }

babel/node을 설치해서 babel-node라는 명령어를 실행할 수 있다. dev를 실행(npm run dev)시키면 babel도 같이 적용되서 실행된다. nodemon이 없으면 index.js에서 파일을 수정할 때 마다 npm run dev을 입력해줘야 한다.

 

2단계 : 'nodemon' 설치

npm i nodemon --save-dev

* package.json > scripts 수정

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

설치한 후 npm run dev를 실행하면 콘솔 창이 종료되지 않고 실행된 상태로 유지된다. index.js를 수정하면 바로 재시작되기 때문이다!