기억 휘발 방지소

Babel 본문

Web

Babel

choice91 2021. 9. 13. 23:20
728x90
반응형

📌 Babel이란?

위키백과에서는 Babel을 다음과 같이 말하고 있다.

Babel은 ESMAScript 2015+ 코드를 이전 JavaScript 엔진에서 실행할 수 있는 이전 버전과 호환되는 JavaScript 버전으로 변환하는데 주로 사용되는 무료 오픈 소스 JavaScript 트랜스컴파일러이다.

 

쉽게 말해 최신 버전의 자바스크립트 문법을 브라우저가 이해할 수 있는 문법으로 변환해주는 컴파일러라고 볼 수 있다.

 

📌 설치

https://babeljs.io/setup로 들어가서 내가 원하는 언어를 선택해주면 된다.

나는 노드에서 사용할 것이기 때문에 노드를 선택했다.

 

선택을 하면 설치하는 방법이 나온다.

 

Node.js에서는 npm install --save-dev @babel/core로 설치하면 된다.

package.json을 열어보면 아래 이미지처럼 babel이 추가된 것을 확인할 수 있다.

 

그 다음에 babel.config.json 이라는 파일을 만들고 아래 코드를 넣어준다.

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

그리고 npm install @babel/preset-env --save-dev 해주면 끝.

 

📌 실행

이제 사용해볼건데 일단 nodemon와 babel-node를 설치해주자.

nodemon은 코드에 변경사항이 생겼을 때 서버를 자동으로 재시작해준다.

npm i nodemon --save-dev
npm install @babel/core @babel/node --save-dev

설치가 끝나면 package.json이 아래와 같이 바뀔 것이다.

 

앞으로 서버를 실행할 때 'node ~.js'으로 실행하지 않고 npm start로 실행할 수 있도록 package.json에서 script를 만들어준다. 이렇게 스크립트를 하나 만들면 npm start로 app.js 파일을 실행시킬 수 있다.

 

 

❗ Node 16버전에서 오류

원래 16.8.0 버전을 사용하고 있었는데 이 버전에서는 babel-node가 실행되지 않았다. 

아래 이미지처럼 에러가 난다.

에러

구글링 해보니까 버전을 낮춰서 해결한 사람이 있어서 14.16.0버전으로 버전을 낮추고 다시 해본 결과

성공!!

서버 실행 성공!!!

 
728x90
반응형

'Web' 카테고리의 다른 글

[Web] Heroku로 앱 배포하기  (0) 2021.11.10
[Web] JWT (Json Web Token)  (0) 2021.10.08
MVC (Model View Controller)  (0) 2021.09.10