바벨(babel) 이란?
ES6+ 이상의 최신문법으로 코드를 작성하면 이 코드를 이해하지 못하는 브라우저들이 있다.
바벨은 이러한 최신문법의 코드를 모든 브라우저가 이해할 수 있는 예전문법으로 변환해주는 도구이다!
바벨 적용하기
바로 본론으로 들어가서, 우리의 프로젝트에 바벨을 적용시키는 법을 알아보자.
1. 프로젝트 폴더 만들기
- 터미널을 켠다.
- cd 명령어로 원하는 경로로 이동 (ex : cd Documents)
- mkdir 폴더이름 < 프로젝트 폴더 만들기
- cd 폴더이름 < 방금 만든 폴더 경로로 들어가기
- npm init -y 입력
여기까지하면 3번에서 만든 폴더에 package.json 파일이 생긴다.
그러면 모든 준비는 끝났다.
2. 바벨 설치하기
이제 본격적으로 바벨을 설치하기 위해서 VSC로 방금 만들었던 폴더를 연다!
터미널에 다음과 같이 입력!
npm i @babel/core @babel/cli @babel/node @babel/preset-env -D
바벨을 우리 프로젝트에 적용하는데에 필요한 패키지들의 설치는 이제 끝났다!
하지만 우리는 바벨을 사용하기 전에 간단하게 설정하나를 해주어야한다.
babel.config.json 파일을 생성한다.
그리고 그 안에 다음과 같이 코드를 입력한다.
{
"presets": ["@babel/preset-env"]
}3. 바벨 적용하기
이제 바벨을 사용할 모든 준비가 끝났다.
이제 어떻게 사용을 하느냐?
package.json 파일에 들어가면, scripts가 보일것이다.
거기에 이런식으로 babel-node 감시할파일 명령어를 실행하는 스크립트를 적어주면 된다.
예를들어 src폴더의 server.js 파일에 적용하고싶다면, babel-node src/server.js 이렇게 적어주면 된다.
🧑💻