Babel, 바벨 | 정의 / 필요성 / 설치 / 설정 / 오류

 

척척 프로그래밍, 인프준

 

바벨, Babel

Node.js 환경에서 개발 프로젝트를 진행하다 보면 여러 버전의 환경을 다루게 됩니다. ES6 도입이 아직 되지 않은 환경도 있고 이제 도입되고 있는 환경도 있을 텐데 ES6, ES7 모듈 부분에서 "request, module.exports" 명령어 부분을 "import, export"로 변경하여 실행하게 되면 Cannot use import statement outside a module와 같은 에러가 발생하게 됩니다. 이와 같은 문제를 해결하는 방법에 대해서 알아보겠습니다.

 

 

 

 

 

Babel 이란?

공식 사이트에 정의된 표현은 간단하게 아래와 같습니다.

 

⭐️ Babel is a JavaScript Compiler

 

자바스크립트 컴파일러, 하지만 자바스크립트는 인터프리터 언어인데 왜 컴파일러가 필요할까요? 컴파일러와 다르게 babel은 javascript로 만들어주는 컴파일러입니다. 즉 transpile, 소스 대 소스 컴파일러라고 불립니다. 좀 쉽게 풀어보면 ES6, ES7 버전의 javascript code를 ES5 버전의 코드로 바꾸어주는 Node.js 패키지라고 표현할 수 있습니다. 웹, 앱 환경에서 자주 변하는 최신 javascript code를 이해하지 못하는 브라우저 등에서 정상동작 할 수 있도록 도와줍니다.

 

Babel 작동방식

여러 개의 플러그인이 자신이 이해할 수 있는 ESNext 문법만 골라 컴파일하는 방식

1. ESNext 구문을 Babel 플러그인으로 보낸다.
2. 여러 개의 Babel 플러그인이 파이프라인 형태로 차례대로 실행한다.
3. Babel 플러그인이 이해할 수 있는 구문을 ES5코드로 컴파일한다.

 

Babel 설치 방법 & 설정 파일 만들기

/* 설치 방법 */

// 일반적으로 세팅하는 모듈 - 바벨 핵심기능, Node.js 명령줄 모드, 기본 js코드 검사 규칙 설치하기
npm i -D @babel/core @babel/node @babel/preset-env

// @babel/node : Node.js 커멘드 라인에서 사용하는 명령어를 사용할 수 있게 해 준다 ( node > babel-node )
npm install @babel/node

// @babel/core : 바벨의 핵심기능이 담겨있는 기본 라이브러리
npm install @babel/core

// @babel/cli : 커맨드 라인에서 바벨을 실행할 수 있는 라이브러리
npm install @babel/cli

// @babel/preset-"" : ESNext코드를 컴파일해 주는 플러그인 모음 설치

npm install @babel/preset-env (기본 js코드 검사)
npm install @babel/preset-flow (플로우 코드 검사)
npm install @babel/preset-typescript (타입스크립트 코드 검사)
npm install @babel/preset-react (리액트 코드 검사)

/* 설정 파일 */
{
"presets" : ["@babel/preset-env"]
}

 

Babel 오류 해결법

npx browserslist@latest --update-db

 

Babel로 Node.js 서버 실행하기

// Node.js 서버의 최신 js코드를 ES5와 같은 호환성 좋은 코드로 변환 후 서버까지 실행해 준다.
babel-node <Node서버>

 

 

References

[Node.js] Babel (바벨) 이란? / 사용법