Babel이란?

• JavaScript 컴파일러다.
• 최신 버전의 JavaScript로 코드를 작성하는데 도움이 되는 도구이다.
• 지원되는 환경이 특정 기능을 기본적으로 지원하지 않는 경우 Babel은 이러한 기능을 지원되는 버전으로 컴파일하는데 도움을 준다.
• 현재 및 이전 브라우저 또는 환경에서 ECMAScript 2015+ 코드를 이전 버전의 JavaScript로 변환하는 데 주로 사용되는 도구 체인이다.
• 크로스 브라우징 이슈를 해결하기 위해 생겨난 툴이다.
• ES6+ 버전의 JavaScript나 TypeScript, JSX 등 다른 언어로 분류되는 언어들에 대해서도 모든 브라우저에서 동작할 수 있도록 호환성을 지켜준다.

크로스 브라우징
다른 기종 혹은 플랫폼에 따라 달리 구현되는 기술을 비슷하게 만듦과 동시에 어느 한쪽에 최적화 되어 치우치지 않도록 공통 요소를 사용하여 웹 페이지를 제작하는 기법. 또한, 지원할 수 없는 다른 웹 브라우저를 위한 장치를 구현하여 모든 웹 브라우저 사용자가 방문했을 때 정보로서의 소외감을 느끼지 않도록 하는 방법론적 가이드를 의미하는 것이다.
브라우저마다 렌더링 엔진이 다르기 때문에 필요하다.

ES6+
ES는 ECMAScript의 줄임말이며 뒤에는 버전이라고 생각하면된다. ECMAScript2015를 ES6라고 하며, ES6 이후 버전을 통칭하여 “ES6+” 라고 한다.

정리

JavaScript의 버전업그레이드로 인한 최신 문법을 가진 ES6+ 코드를 런타임 환경인 브라우저가 인식하고 실행하는데 문제가 생김.
효율성과 유지보수등의 이유로 코드는 ES6+ 로 구현해야 하는데 실행환경인 모든 브라우저가 최신 문법을 다 지원하지 못하기에 버전 차이가 발생하게 된다. 이러한 문제를 해결해 주는게 Babel이다. ES6+ 로 작성된 코드를 브라우저가 인식할 수 있는 ES5로 변환시켜주는 Transpiler 이다.(TypeScript, JSX 는 아직 제대로 사용해보질 않아서 잘 모르겠다.)

Babel은 Compiler VS Transpiler?
공식사이트에는 컴파일러라고 나와있는데 찾다보니 트랜스파일러 라고도 나와있어 뭐가 맞는지 찾아봤는데 Babel은 트랜스파일러 이자 컴파일러 라고 한다.
컴파일은 작성된 코드를 컴퓨터의 저수준 실행 파일(일반적으로 기계어 코드)로 바꾸는 포괄적인 용어이며, 트랜스파일은 때때로 소스-투-소스 컴파일러 라고도 하므로 트랜스파일러가 컴파일러의 한 유형 이기 때문에 babel이 컴파일러라고 주장할 수 있다고 한다.
https://stackoverflow.com/questions/43968748/is-babel-a-compiler-or-transpiler/
https://dev.to/kealanparr/compiling-vs-transpiling-3h9i/

사용하기

Node.js 에서 Babel

Node.js 의 경우 최신 버전을 사용한다면 거의 왠만한 ES6 문법은 도입이 되어 있지만, 아직 CommonJS 기반 모듈 시스템을 사용하기 때문에 ES6의 import나 export 와 같은 키워드는 디폴트로 지원되지 않고 있다. (다른 방법도 있다고 함. ECMAScript modules)
이러한 예외를 해결하기 위해 작성한 코드를 NodeJS 런타임이 실행가능한 형태로 변환해줘야 한다.

--save-dev
설치된 모듈이 package.json 의 devDependencies 에 표시된다.
dependencies는 프로젝트에 필요한것을 나타내고 devDependencies는 개발자에게 필요한것을 나타낸다고 한다. dependencies에 다 표시해도 상관은 없지만 어떤 패키지가 무슨 일을 하는지 알기 위한 우리를 위한 구분이다.

1. npm install --save-dev @babel/core
   Babel 핵심 패키지를 설치한다.

2. babel.config.json 구성 파일 생성

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

3. npm install @babel/preset-env --save-dev
   Babel 설정은 여러 플러그인을 스스로 조합하거나 미리 준비된 프레셋을 사용할 수 있다. env 라는 가장 범용적으로 사용되는 프리셋을 사용하는데 이는 ES2015 이상의 최신 JavaScript 문법으로 작성된 코드를 해석할 수 있다. env 사전 설정

   사용
   require("@babel/core").transform("code", { presets: ["@babel/preset-env"], });
   위와 같은 코드를 이용해서 사용할 수도 있지만, 추가로 모듈을 설치해 편리하게 사용하자.

4. npm install @babel/node --save-dev
babel-node 라는 명령어를 사용할 수 있게된다. nodeJS 가 실행될 때 babel도 같이 적용되서 실행이 된다.

nodemon

우리가 만든 파일이 수정되는걸 감시해주는 패키지로 코드를 수정할 때마다 알아서 재시작을 해주어 수정할 때마다 node를 재실행해줘야 하는 불편함을 없애준다.
npm install nodemon --save-dev
설치 후
package.json 의 scripts 부분을 수정해준다.

"scripts": {
	"dev": "nodemon --exec babel-node index.js"
}

이러면 npm run dev 명령어를 통해 nodemon 을 실행할 수 있다.
(다른 사용방법 : https://babeljs.io/setup#installation/)

Reference

https://babeljs.io/docs/en/index.html/
https://github.com/babel/babel/
https://velog.io/@seochanh/00003#:~:text=%ED%81%AC%EB%A1%9C%EC%8A%A4%20%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A7%95-,%ED%81%AC%EB%A1%9C%EC%8A%A4%20%EB%B8%8C%EB%9D%BC%EC%9A%B0%EC%A7%95%EC%9D%B4%EB%9E%80%3F,%ED%95%98%EB%8A%94%20%EA%B8%B0%EB%B2%95%EC%9D%84%20%EB%A7%90%ED%95%98%EB%8A%94%20%EA%B2%83%EC%9D%B4%EB%8B%A4./
https://devowen.com/293/
https://mwoo526.tistory.com/32/
https://www.daleseo.com/js-babel-node//