[Node.js] 🛠️ Babel 소개 및 사용법

목차

Babel 이란?

Babel이란 최신 ES6, ES7 버전의 JavaScript 코드를, ES5버전의 코드로 바꾸어주는 Node.js 패키지를 의미한다.

---

Babel을 사용해야 하는 이유

계속해서 변화하는 JavaScript의 최신 코드를 이해하지 못하는 웹 브라우저의 문제를 해결하기 위하여, 또는 컴퓨터만이 아니라, 스마트폰에서 사용하는 브라우저에서도 자바스크립트 코드를 작동되도록 만들어주기 때문에 사용해야 한다.

---

Babel 작동방식

Babel은 여러개의 플러그인이, 자신이 이해할 수 있는 ESNext 문법만 골라, 컴파일하는 방식으로 작동된다.

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

---

Babel 설치

• Babel을 설치하는 방법은 밑의 코드를 참고하여 따라하면 된다.

Shell

# @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 (리액트 코드 검사)

Shell

// 바벨 핵심기능, Node.js 명령줄 모드, 기본 js코드 검사 규칙 설치하기
npm install -D @babel/core @babel/node @babel/preset-env

---

Babel 사용법

Babel 설정 파일 만들기

• .bablerc 파일을 생성한 뒤 밑의 코드대로 작성한다.

JavaScript

// .babelrc

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

// 기본 javascript 방식으로 바꾸어준다.

---

Babel 사용해 ES5 코드로 바꾸기

JavaScript

babel src/js -w -d dist/js


// "src/js" 폴더에 있는 모든 ES6+ 파일들을 번들로 만들어, 그 결과를 "dist/js"폴더에 저장
// -w : 폴더에 있는 모든 파일 변경감지, 자동 변경 (--watch)
// -d : 결과 출력 폴더 지정 (--out-dir)


babel script.js -o compiled.js -s

// -o : 결과를 파일로 출력 (--out-file)
// -s : 난독화된 코드를 다시 읽기 좋게 바꾸는, 소스 맵 파일을 추가 (--source-maps)
// -s inline : 인라인(한줄씩) 소스 맵 사용


// --ignore "src/*" : "src폴더 안에 있는 모든 파일을 무시한다.
// --plugins=@babel/proposal-class : 컴파일 할때 사용할 플러그인 불러오기


// --copy-files --no-copy-ignored : 컴파일 안되는 파일 복사?
// --out-file "*.js" < "*.js" : 파이핑?

---

Babel 사용해, Node.js 서버 실행하기

Shell

babel-node <Node서버>

// Node.js 서버의 최신 js코드를, es5 같은 호환성좋은 코드로 변환후, 서버까지 실행해준다.

---

Babel 사용시 발생오류 해결법

Shell

// browserslist: caniuse-lite is outdated

npx browserslist@latest --update-db

---

참고 문헌

• 1[NODE] 🛠️ 바벨(Babel) 설치 & 사용법
• 2[Babel] 모르고 사용하던 Babel. 이젠 두려워 마세요. - Babel 알아보기
• 3[Babel] Babel 의 역할, 기본적인 사용법
• 4바벨(Babel 7) 기본 사용법
• 5트랜스파일을 위한 바벨(Babel) 예제 만들어보기