babel.config.js vs .babelrc

1. 바벨(babel)이란?

 

▪ 브라우저나 플랫폼마다 보여지는 모습이 다른 경우가 많다. 이러한 차이를 최소화하여 브라우저, 환경에 영향을 덜 받고 해당 웹 서비스를 사용할 수 있게 최적화를 하는 작업을 크로스 브라우징이라고 한다. 프론트엔드 개발자들에게는 크로스 브라우징 이슈는 코드의 일관성도 어렵게 만들고 혼란스럽게 하는 요소 중에 하나이다. 이런 크로스 브라우징 이슈를 해결하기 위해서 만들어진 툴이 바벨이다!

 

ES6+ 버전의 자바스크립트나 타입스크립트, JSX 등 다른 언어로 분류되는 언어들에 대해서도 모든 브라우저에서 동작할 수 있도록 호환성을 지켜준다. 코드를 변화시키는 트랜스파일러의 역할을 한다. 

 

 

 

바벨 설정을 할 때 두가지로 나뉩니다. 두가지 파일 포맷은 단독으로 쓰일 수도 있고, 함께 쓰일 수도 있습니다.

 

2. .babelrc

서브셋 디렉토리 또는 파일에서 특정한 플러그인이나, 변형 할 때 유용합니다. 예를 들어, 프로젝트 내에 서드파티 라이브러리가 바벨에 의해 트랜스폼되기 원하지 않을 수 있습니다.

 

 

3. babel.config.js

여러 패키지 디렉토리를 가진 프로젝트에서 하나의 바벨 설정을 가져갈 때 유용합니다. 보다 보편적으로 사용됩니다.