Notice
Recent Posts
Recent Comments
Link
«   2024/12   »
1 2 3 4 5 6 7
8 9 10 11 12 13 14
15 16 17 18 19 20 21
22 23 24 25 26 27 28
29 30 31
Archives
Today
Total
관리 메뉴

Code Habit

[JavaScript] babel 사용 본문

카테고리 없음

[JavaScript] babel 사용

코드베어 2022. 12. 5. 22:13

babel은 작성 완료된 JavaScript 코드를 다른 버전의 JavaScript 코드로 번역할 수 있는 JavaScript 컴파일러이다. 최신버전의 JavaScript 코드는 브라우저가 이해하지 못하기 때문에 babel이 브라우저가 이해할 수 있는 문법으로 변환해 준다. babel을 사용하면 최신 문법을 사용할 수 있는 장점이 있다.

 

- babel 설치

npm i @babel/core @babel/cli @babel/node @babel/preset-env -D

@babel/core : babel 코어 패키지로 babel을 사용하는데 필수로 필요하다.

@babel/cli : babel을 터미널에서 커맨드로 사용하는데 필요한 패키지이다.

@babel/node : Node.js 커맨드 라인에서 사용하는 명령어를 사용할 수 있게 해준다.

@babel/preset-env : babel을 실행하기 위한 플러그인들을 모아 놓은 파일이다. ES6 이후 JavaScript의 모든 기능을 컴파일할 수 있게 해준다.

 

- babel 설정

프로젝트 루트 디렉토리에 'babel.config.json' 파일을 만들고 아래와 같이 작성한다.

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

 

- babel 실행 ( with nodemon )

nodemon babel-node src/server.js

server.js파일을 babel을 통해 최신문법을 사용할 수 있도록 컴파일 하고 이를 nodemon을 통해 실행했다.