SpringBoot에서 ES6 사용할 수 있게 세팅하기

1. 스프링 부트 프로젝트 생성 - IntelliJ 기준

2. Spring Boot localhost:8080 웹 페이지 띄우기

1. 터미널에서 아래 명령어를 입력한다.

npm init -y

폴더에 package.json이 만들어진다.

2. 바벨 플러그인들을 설치한다.

npm install --save-dev @babel/cli @babel/core @babel/preset-env @babel/preset-stage-2

npm install --save core-js@3

3. .babelrc 파일을 생성해준 뒤 아래 내용을 입력한다.

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

4. package.json 파일에서 scripts 부분을 찾아서 build를 추가한다.

"build": "babel src/main/resources/static/js -d src/main/resources/static/lib"

5. 아래 명령어를 돌린 후 static밑에 js 폴더를 만든 후 index.js 파일을 만든다.
그리고 아래 명령어를 실행시키면 es5로 변환된 파일이 static/lib 밑에 생성되어 있는걸 확인할 수 있다.

npm run build

 

참고: 

바벨은 최신 자바스크립트 문법으로 쓰여진 코드가 업데이트가 되지 않은 브라우저에서도 작동할 수 있도록 구형 문법으로 변경해주는 역할을 하고, 웹팩은 그렇게 변경된 파일들을 이제 최종적으로 모으고 모아서(번들링해서) 배포하기 좋게 정리해주는 역할을 한다.