Vue_babel.config.js

0. 들어가면서

Vue 프로젝트를 진행하다보면 bable.config.js파일이 있는 것을 알 수있다.

 

 

 

1. babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ]
}

 

 

들어가보면 위와 같은 코드가 적혀져 있다. 바벨이라는 것은 무엇일까?

 

 

2. babel

babel이란 무엇일까? 그리고 왜 babel을 사용하는 것일까? 구글에 babel을 쳐보면 홈페이지는 아래와 같이 나온다.

babeljs.io/

Babel · The compiler for next generation JavaScript

쉽게 말해서 Babel은 최신버전의 자바스크립트를 구버전의 자바스크립트로 다 바꿔준다. 만약 화살표 함수의 코드를 넣으면 구버전으로 작성된 것을 확인 할 수 있다. 즉, 우리가 인지하고 있지 못하더라고 Vud에서는 babel compiler를 통해서 버전을 맞춰주고 있는 것이다. babel이 적혀 있어서 구버전의 브라우저들에서도 실행이 가능하다.