Springboot 프로젝트에 Webpack Babel 적용하기

Babel?

ECMAScript 2015(ES6) 이상의 javascript 파일을 ES5로 변환해주는 툴.

ES7은 ES2016, ES8은 ES2017

ECMAScript는 ECMA-262 국제 표준 기술규격에 정의된 표준화된 스크립트 프로그래밍 언어

babel은 webpack과 같은 빌드시스템과 함께 사용한다. 그러면 bable이 어떻게 동작하는지 찾아보기 쉽다. 좋은 연습은 babel을 webpack과 같은 빌드 시스템없이 만들어 보는 것이다.

참고 ES2016~ES2020에 대해 정리해놓은 글

ECMAScript ES2016~ES2020 정리

프로젝트 Babel 환경 설정

프로젝트 디렉토리 생성

mkdir {project-directory} && cd {project-directory}

package.json 생성

-y는 name, author, version 등 package.json의 속성값을 기본(빈값)으로 사용하겠다는 뜻

npm init -y

babel 관련 패키지 설치

cli는 command line interface 의 약자로 명령어로 해당 도구를 사용할 수 있게 만든 것

• --save-dev는 개발용 의존성으로 설치하겠다는 뜻으로 npm install --production으로 설치 시 개발용 의존성은 제외하고 설치됨

babel-preset-env

preset은 바벨의 플러그인들을 여러개 모아놓은 파일. preset을 설치하면 관련 plugin들이 자동적으로 설치된다.

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

공식 preset

• @babel/preset-env
• @babel/preset-flow
• @babel/preset-react
• @babel/preset-typescript

.babelrc 파일 추가

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

한국에서 점유율 5% 이상인 브라우저 & 최신 두 버전 브라우저 지원하는 preset

{
  "presets": ["env", { "targets": { "browsers": ["last 2 versions", "> 5% in KR"] } }, "stage-2"]
}

package.json 바벨 빌드 명령어 추가

"scripts": {
    "build": "babel src/main/resources/static/js -d src/main/resources/static/lib"
  },

-w : (--watch) 변경이 있을 때 자동으로 감지해서 트랜스파일링

-d : (--destination) 저장될 디렉토리를 지정한다.

바벨 실행 (트랜스파일링)

npm run build

웹팩

npm uninstall --save-dev webpack webpack-cli
npm uninstall --save-dev babel-loader

npm install --save-dev @babel/plugin-syntax-dynamic-import @babel/plugin-proposal-decorators @babel/plugin-proposal-class-properties