babel설정하기

babel은 최신스크립트 문법을 현재 및 이전브라우저에서 작동하는 자바스크립트 코드로 변경하는 도구 이다.

package.json 파일 생성한다.

npm init -y

babel을 설치한다. react를 사용한다면 @babel/preset-react도 추가한다.

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

.babelrc 파일을 생성, 파일 내용을 아래와 같이한다.

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

package.json 파일에 아래 내용을 추가한다. ./src/js 폴더에 있는 스크립트파일을 변환하여 ./dist/js 폴더에 변환된 파일을 생성한다. (-w 옵션은 파일이 변경 시, 자동변환)

"scripts": {
	"babel": "babel src/js -w -d dist/js"
}

babel을 실행한다.

npm run babel